2

我已经制作了一个网站的草图，该网站的页眉和页脚延伸到无穷大，但导航框和内容框（中间部分）的大小相同。因此，如果我开始拉伸我的浏览器，它开始看起来很糟糕。

问题：我怎样才能使中间部分相应地拉伸？

<div id="main">
<div id="header">
    <h1><b>Website Header</b></h1>
    </div>
<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
<div id="submain">
    <div id="chat">
        <h3>CHAT BOX</h3>
        </div>
    <div id="content">
        <h1>Content goes here</h1>
        </div>
    <div id="subright">
        <div id="members">
            <h4>Member Area</h4>
            </div>
        <div id="recent">
            <h4>Recent Activity</h4>
            </div>
        </div>
    </div>
<div id="footer">
    <b>Some footer, 2013</b>
    </div>
</div>

我的css文件：

html {
    height: 100%;
    width: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 15px;
    background: #66FF66;
}
img {
    border: none;
}
a {
    color: #8D0D19;
}
a:hover {
    color: #1A446C;
}
#header {
    height: 150px;
    margin: 10px;
    padding: 5px;
    text-align: left;
    background: #1A446C;
    color: #D4E6F4;
}
#header h1 {
    padding: 1em;
    margin: 0;
}
#nav {
    text-align:center;
    /*word-spacing:240px;*/
    float: center;
    height: 100%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 1px 0em;
    color: #D4E6F4;
    background: none;
}
#nav a {
    color: #D4E6F4;
    text-decoration: none;
}
#nav li a:hover {
    background: #383;
}
#nav ul li {
    list-style-type: none;
    display: inline;
}
#nav li a {
    display: block;
    float: left;
    padding: 5px 98px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
#submain {
    height: 600px;
    width:1080px;
    margin: 30px;
    padding: 0px 0em;
    background: #3366FF;
}
#chat {
    float: left;
    text-align:center;
    width: 150px;
    height: 100%;
    margin: 0px;
    padding: 0px 2em;
    color: #D4E6F4;
    background: #8D0D19;
}
#content {
    float: left;
    width: 600px;
    height: 100%;
    margin: 0;
    padding: 0 1em;
    color: #D4E6F4;
    background: #330033;
}
#subright {
    height: 600px;
    margin: 0px;
    padding: 0px 0em;
    background: #3366FF;
}
#members {
    float: right;
    width: 200px;
    height: 20%;
    margin: 0;
    padding: 0 2em;
    color: #D4E6F4;
    background: #8D0D19;
}
#recent {
    float: right;
    width: 200px;
    height: 80%;
    margin: 0;
    padding: 0 2em;
    color: #D4E6F4;
    background: #336600;
}
#footer {
    clear: both;
    height: 2em;
    margin: 10px;
    padding: 1em;
    text-align: center;
    background: #1A446C;
    color: #D4E6F4;
}
4

2 回答 2

0

一切都没有拉伸的原因是因为在你的情况下，你没有对最上面的父容器应用任何样式<div id="main"></div>。

您需要将 100% 的宽度添加到#maindiv，将其向左浮动并设置溢出隐藏，以便高度拉伸以适合里面的内容。

html, body {
    height: 100%;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 15px;
    background: #66FF66;
}
img {
    border: none;
}
a {
    color: #8D0D19;
}
a:hover {
    color: #1A446C;
}
#main {
    width:100%;
    overflow:hidden;
    float:left;
    background:red;
}
#header {
    height: 150px;
    margin: 10px;
    padding: 5px;
    text-align: left;
    background: #1A446C;
    color: #D4E6F4;
}
#header h1 {
    padding: 1em;
    margin: 0;
}
#nav {
    text-align:center;
    /*word-spacing:240px;*/
    float: center;
    height: 100%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 1px 0em;
    color: #D4E6F4;
    background: none;
}
#nav a {
    color: #D4E6F4;
    text-decoration: none;
}
#nav li a:hover {
    background: #383;
}
#nav ul li {
    list-style-type: none;
    display: inline;
}

jsFiddle

于 2013-08-15T21:01:45.763 回答
0

如果您指定min-widthor width（就像您分别为 #nav 和 #submain 所做的那样），这将限制应用它们的元素的宽度。删除它们，使它们不受约束。当然，您必须在这些框中布局其他元素，以便它们流畅地流动。

于 2013-08-15T21:00:50.100 回答