帮助，已经在这个HTML页面上工作了几个小时。我一直在Chrome中查看它，但是当我调整页面大小时，我注意到我添加的侧边栏掩盖了所有内容。
这就是我想要做的事情：
调整页面大小时保持滚动条（保持页面相同）
在一侧有一个侧边栏，并且能够在页面上滑动以找到另一个滚动条。 （我不希望它像现在一样覆盖所有东西..）
以下是代码：
#img1 {
width: 400px;
padding-bottom: 25px;
}
#container1 {
text-align: center;
}
#heading-contain {
background-color: LightSeaGreen;
width: 650px;
margin: auto;
border-radius: 7px;
font-family: "adam", arial;
color: white;
}
#heading2 {
border-top: 1px solid white;
}
#heading1 {
position: relative;
top: 15px;
}
#heading2 h3 {
position: relative;
bottom: 6px;
color: DarkSlateGrey;
}
#main-content {
width: 650px;
margin: auto;
margin-top: 30px;
background-color: LightSlateGrey;
border-radius: 8px;
}
#text1 {
padding-bottom: 30px;
padding-top: 20px;
font-family: arial;
color: white;
margin-left: 20px;
margin-right: 20px;
line-height: 200%;
}
#name {
color: DarkSeaGreen;
font-weight: bold;
font-family: "dragon is coming";
font-size: 300%;
}
body {
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#footer {
background-color: LightSeaGreen;
color: white;
border: 1px double white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
height: 30px;
padding: 5px;
font-family: "adam";
font-weight: bold;
}
#footer p {
margin: 5px;
}
#name:hover {
color: LightCoral;
cursor: default;
}
#line1 {
text-align: center;
}
#paragraph {
text-indent: 50px;
display: inline-block;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
background-color: LightSlateGrey;
color: white;
border-bottom: 1px solid white;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
li:hover {
background-color: DarkSeaGreen;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
position: fixed;
font-family: "adam";
color: white;
}
#sidebar-right h4 {
width: 180px;
padding: 10px;
}
#sidebar-right img {
width: 160px;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
}
#sidebar-right p {
font-size: 13px;
padding-right: 6px;
padding-left: 6px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML WEBPAGE 2 | Brett Carwile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container1">
<!-- Container1 contains all the elements on the page !-->
<div id="heading-contain">
<!-- Heading-container contains everything in the header !-->
<div id="heading1">
<!-- Heading1 is the top of the header which includes the h1 !-->
<h1>HTML Webpage 2</h1>
</div>
<div id="heading2">
<!-- Heading2 is the bottom half of the header including the h3 !-->
<h3>By Brett Carwile</h3>
</div>
</div>
<div id="sidebar-right">
<h4>About the Author</h4>
<img src="DSC00071.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper gravida facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed dui diam. Nulla facilisi. Donec rhoncus dolor malesuada urna commodo lacinia. Sed vel nisi
venenatis, aliquet nibh at, lobortis lacus. Etiam enim lacus, venenatis a sagittis ac, rhoncus in velit. Pellentesque turpis massa, condimentum eget eleifend non, sit amet justo. Vivamus accumsan iaculis placerat. Quisque blandit diam ut risus
ultrices rutrum. Mauris pretium in augue ut lobortis. Vivamus tempor ac nisl at euismod. Maecenas laoreet a erat a varius. Curabitur consequat nunc vehicula tellus ornare, vitae aliquet sapien varius.
</P>
</div>
<div id="sidebar-left">
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
<p>Check out the awesome links above!!</p>
</div>
<div id=main-content>
<!-- This div is the main area below the header (text, img ect...) !-->
<p id="text1">
<!-- This span is to seperate the first line from the rest of the text !-->
<span id="line1"> This is an HTML webpage by <span id="name">Brett Carwile</span>.</span>
<br>
<!-- This span is so that we can indent the text !-->
<span id="paragraph">This is a text sample. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id quam nulla. Nam sollicitudin porta ligula, sit amet pharetra elit tincidunt sit amet. Suspendisse rhoncus, elit at consectetur sagittis, nisi eros molestie urna, et cursus elit sapien quis ante. Sed sit amet pulvinar neque. Pellentesque eget lorem ac lorem sodales rutrum. Nulla erat nisl, consequat non ante vitae, porttitor convallis magna. Duis pulvinar ornare nisi nec varius. Mauris tempus nisi non viverra vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum viverra erat eu rhoncus.
Cras nec vulputate leo. Donec nunc mauris, varius id ligula eu, tincidunt euismod lorem. Praesent pharetra, ipsum et congue egestas, sapien augue feugiat lacus, ac tincidunt augue leo ut tortor. Mauris efficitur urna ut turpis ornare, eu consectetur lacus dapibus. Curabitur sit amet justo blandit est fermentum volutpat. Sed in gravida nunc. Integer sit amet risus in justo porttitor cursus. Mauris tortor purus, viverra a lacus et, suscipit molestie tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </span>
</p>
<img src="DSC00071.jpg" id="img1">
<div id="footer">
<p>Thank you for viewing!!! © Brett Carwile 2016</p>
</div>
</div>
</div>
</body>
</html>
您可以尝试HTML / CSS并调整窗口大小以查看我的意思。
答案 0 :(得分：0)
将min-width添加到body元素并移除为侧边栏左侧和侧边栏右侧固定的位置将成为诀窍。请参阅下面修改后的css规则。
body {
min-width: 1200px; //Modify depending on your requirements
background-image: url("https://lh4.ggpht.com/X5kjAhye8_5IE9Ws3Z0e05aIAsP_jCSbsh1hja0nNdF8GczkNd0aZQEe7w1V5-2B-9k=h900");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#sidebar-left {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: 0px;
top: 0px;
font-family: "adam";
color: white;
}
#sidebar-right {
background-color: LightSeaGreen;
width: 200px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
font-family: "adam";
color: white;
}
我希望它有所帮助。