我有两个问题要处理：
当我将窗口调整为较小的尺寸时，导航栏似乎会折叠到自身上。我需要它独立于窗口大小。我将在下面提供HTML和CSS表格。
另外，我使用Divs来放置内容，在这种情况下是照片......我怎样才能使div随着内容的大小而扩展？
我猜两个问题都与同一个问题有关;元素的大小。
* {
border:0px;
margin:0px;
font-family: 'Raleway', sans-serif;
}
}
#wrapper {
width:auto;
height: 100%;
margin:0 auto;
border:1px solid #ccc;
}
#header {
height:15%;
border: 1px solid #eee;
background-color: rgb(255, 255, 255);
}
h1 {
font-size: 60px;
position:relative;
left:50px;
}
h6 {
font-size: 15px;
position:relative;
left:60px;
padding-bottom: 10px;
}
#nav {
height:50px;
width:100%;
background-color: rgb(255, 255, 255);
font-size: 20px;
}
ul {
width:100%;
padding:10px;
border: 2px solid #eee;
overflow: hidden;
}
li {
display: inline;
padding: 10px 40px 10px 40px;
border:2px solid #eee;
}
a{
color:black;
text-decoration: none;
}
#content {
width:100%;
}
#main_content{
width:85%;
float:left;
height: 100%;
border:1px solid #eee;
}
#container_one{
position:relative;
left:20px;
top:20px;
}
#container_two{
position:relative;
left:600px;
top:-337px;
}
#sidebar_one{
width:5%;
background-color: rgb(255, 255, 255);
min-height: 40%;
float:right;
}
#footer {
height:10%;
width:100%
background-color: rgb(255, 255, 255);
border:1px solid #eee;
font-size: 10px;
clear: both;
}
.clear {
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!--DOCKMANN CORP. 10/6/16-->
<title>DOCKMANN</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<a href="http://dockmann.com"><H1>DOCKMANN</H1></a>
<h6>Find your balance</h6>
</div> <!--END OF HEADER-->
<div id="nav">
<ul>
<li>
<a href="http://dockmann.com">HOME</a>
</li>
<li>
<a href="photo.html">PHOTO</a>
</li>
<li>
<a href="film.html">FILM</a>
</li>
<li>
<a href="social.html">SOCIAL</a>
</li>
<li>
<a href="contact.html">CONTACT</a>
</li>
</ul>
</div> <!--END OF NAV-->
<div id="content">
<div id="main_content">
<h3>Photo content</h3>
<div id="container_one">
<a href="https://www.instagram.com/p/BLMwFmwDcpk/?taken-by=dockmann_com"><img src="/dk_images/R1 500-333.jpg"/></a>
<br />
001 Roxanne
</div> <!--CONTAINER_ONE END-->
<div id="container_two">
<a href="https://www.instagram.com/p/BLMwJyvjVWr/?taken-by=dockmann_com"><img src="/dk_images/R2 500-333.jpg"/></a>
<br />
002 Roxanne
</div>
</div> <!--END OF MAIN CONTENT-->
<div id="sidebar_one">
</div> <!--END OF 1_SIDEBAR-->
<div class="clear"></div>
</div> <!--END OF CONTENT-->
<div id="footer">
DOCKMANN CORP. All Rights Reserved. 2016
</div> <!--END OF FOOTER-->
</div> <!--END OF WRAPPER-->
</body>
</html>
答案 0 :(得分：0)
这是因为你给了#nav 100％。因此窗口宽度将是动态的。放一些静态值，如980px，1000px等。或者你可以在它上面放一个最小宽度。
对于第二个问题。您的#main_content必须是100％宽度。
* {
border: 0px;
margin: 0px;
font-family: 'Raleway', sans-serif;
}
}
#wrapper {
width: auto;
height: 100%;
margin: 0 auto;
border: 1px solid #ccc;
}
#header {
height: 15%;
border: 1px solid #eee;
background-color: rgb(255, 255, 255);
}
h1 {
font-size: 60px;
position: relative;
left: 50px;
}
h6 {
font-size: 15px;
position: relative;
left: 60px;
padding-bottom: 10px;
}
#nav {
height: 50px;
width: 980px;
background-color: rgb(255, 255, 255);
font-size: 20px;
}
ul {
width: 100%;
padding: 10px;
border: 2px solid #eee;
overflow: hidden;
}
li {
display: inline;
padding: 10px 40px 10px 40px;
border: 2px solid #eee;
}
a {
color: black;
text-decoration: none;
}
#content {
width: 100%;
}
#main_content {
width: 85%;
float: left;
height: 100%;
border: 1px solid #eee;
}
#container_one {
position: relative;
left: 20px;
top: 20px;
}
#container_two {
position: relative;
left: 600px;
top: -337px;
}
#sidebar_one {
width: 5%;
background-color: rgb(255, 255, 255);
min-height: 40%;
float: right;
}
#footer {
height: 10%;
width: 100% background-color: rgb(255, 255, 255);
border: 1px solid #eee;
font-size: 10px;
clear: both;
}
#main_content {
width: 100%;
}
.clear {
clear: both;
}<div id="wrapper">
<div id="header">
<a href="http://dockmann.com"><H1>DOCKMANN</H1></a>
<h6>Find your balance</h6>
</div>
<!--END OF HEADER-->
<div id="nav">
<ul>
<li>
<a href="http://dockmann.com">HOME</a>
</li>
<li>
<a href="photo.html">PHOTO</a>
</li>
<li>
<a href="film.html">FILM</a>
</li>
<li>
<a href="social.html">SOCIAL</a>
</li>
<li>
<a href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<!--END OF NAV-->
<div id="content">
<div id="main_content">
<h3>Photo content</h3>
<div id="container_one">
<a href="https://www.instagram.com/p/BLMwFmwDcpk/?taken-by=dockmann_com"><img src="/dk_images/R1 500-333.jpg" /></a>
<br /> 001 Roxanne
</div>
<!--CONTAINER_ONE END-->
<div id="container_two">
<a href="https://www.instagram.com/p/BLMwJyvjVWr/?taken-by=dockmann_com"><img src="/dk_images/R2 500-333.jpg" /></a>
<br /> 002 Roxanne
</div>
</div>
<!--END OF MAIN CONTENT-->
<div id="sidebar_one">
</div>
<!--END OF 1_SIDEBAR-->
<div class="clear"></div>
</div>
<!--END OF CONTENT-->
<div id="footer">
DOCKMANN CORP. All Rights Reserved. 2016
</div>
<!--END OF FOOTER-->
</div>
<!--END OF WRAPPER-->