【发布时间】：2018-07-12 15:18:26
【问题描述】：
所以我在这里阅读了一些其他线程来创建响应式网站。不幸的是，我不能使用他们提供的信息，因为我的网站有一个独特的布局。布局在中间分开，左侧不可滚动，但右侧可滚动。当屏幕变小时，我希望左侧位于顶部，右侧（可滚动侧）位于底部，这样用户就可以像在移动设备上一样上下滚动。一直在寻找不同的解决方案，但似乎不起作用。 谁能帮帮我？
这里是代码（注意左拆分和右拆分）：
<body>
<div class="split-left">
<div class="centered">
<img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Cover.png" class="cover">
</img>
</div>
<header>
<nav>
<ul>
<li><a href="#" class="menu">Menu</a>
<div class="arrowup">
<ul>
<li><a href="#aboutus">About Us</a></li>
<li><a href="#newsletter">Newsletter</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li>
</ul>
<!-- Social Media Links -->
<div id="socialmedia">
<a href="https://www.facebook.com/whammychat/?ref=bookmarks" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/FB.png" alt="Facebook"></a>
<a href="https://twitter.com/whammychat" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Twitter.png" alt="Twitter"></a>
<a href="https://www.instagram.com/whammychat/" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Instagram.png" alt="Instagram"></a>
</div>
</nav>
</header>
</div>
<!-- RIGHT -->
<div class="split-right">
<div class="centered">
<img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/New%20Logo%20-%20Social%20Media.png" class="logo"></img>
<div class=catchphrase>
<h1>
<span class="messenger"> Messenger </span>
<span class="x"> x </span>
<span class="gaming"> Gaming </span>
</h1>
</div>
<p class="soon"> Coming Soon <p>
<img class="gif" src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" alt="Intro GIF
"/>
css：
header ul li {
font-family: backtoschool;
position: relative;
z-index: 1.5;
list-style: none;
}
header ul li a {
display: block;
text-decoration: none;
color: white;
}
.menu {
border-style: solid;
border-color: white;
border-radius: 15px;
border-width: 1px;
margin: 4% 0% 0% -2%;
padding: 1.5%;
width: 10%;
text-align: center;
}
/* .menu {
transition: 1s ease;
}
.menu:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s ease;
} */
header ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 0%;
border-radius: 10px;
border-style: none;
margin: 0% 0% 0% -3.5%;
}
header ul li:hover ul {
display: block;
}
header ul li ul li {
width: 100px;
}
header ul li ul li a {
padding: 15%;
}
header ul li ul li a:hover {
background: #696969;
border-radius: 10px;
border-style: none;
}
/*Social Media Icons*/
#socialmedia img {
position: relative;
z-index: 1.5;
left: 71%;
width: 8%;
margin-top: -100px;
padding-bottom: 43px;
height: auto;
}
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
#socialmedia img:hover {
animation: bounce 1s;
}
.split-left {
position: fixed;
height: 100%;
width: 50%;
z-index: 1;
top: 0;
left: 0;
}
.split-right {
margin-left: 50%;
width: calc(100%-50%);
height: auto;
}
【问题讨论】：
-
我建议您研究 CSS Grid。它允许您分配区域。因此，您可以拥有完全重新排列布局中的 DIV 的媒体查询。如果您可以提供当前的 css 等，以便我们了解它当前的工作方式，我们将能够更轻松地提供有效的解决方案:)
-
忽略您网站的一部分现在可以滚动并再次搜索，然后您会找到数百种解决方案。使用其中之一，然后使区域可滚动，这与排列列没有任何关系。
-
@KeeghanMcGarry 我添加了 CSS :)
标签： html css responsive-design