1

这可能是一个非常基本的 css 问题，但我尝试按照书中的说明创建流畅的布局，到目前为止，我的标题和导航栏似乎在适当的位置，但内容 div 不在，我也想做我的内容高度灵活，因为它适用于动态网络应用程序，因此页脚应相应地位于其下方。好的，这是 id 想要实现的模型 在此处输入图像描述

<body>

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul>

</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">

</div>
<div id="footer">
<p>&copy; TEST</p>
</div>
</body>
</html>

这是我的CSS代码：

body{
width: 90%;
margin: 0 auto;}

#content {
overflow: auto;
height: 29em;}

#header{
height: 60px;
overflow: hidden;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#personalised p {
float: left;
width: 20%;
margin-top:5%;}

#navigation{
margin: 1%;}

#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}

div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }

#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}

我知道这很长，但我非常感谢您的帮助。提前致谢

4

2 回答 2

2

首先尝试处理您的格式。（这还不错，但可以使用改进。）对您来说最大的好处之一就是您可以阅读的代码。你可以看看我在这里做了什么，玩你喜欢的。http://jsfiddle.net/mPH8X/

<head>
<style>
div {
 border: 1px dashed #FF0000;
}
body {
    margin: 0px;
    padding: 0px;
}

.clear {
    clear: both;
}

#header {
    min-height: 60px;
    overflow: hidden;
    margin: 1%;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#navigation{
    margin: 1%;
    float: right;
}

#navigation ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#navigation ul li {
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
    float: left;
}

#navigation li ul { 
    display: none; 
}

.body {
    clear: both;
}

#personalised {
    margin: 1%;
    float: left;
    width: 20%;
}

#content {
    margin: 1%;
    float; right;
    min-height: 29em;
}

#personalised p {
    margin: 0px;
    padding: 0px;
}

#header, #footer, #navigation, #personalised {

}

#footer {
    padding: 0.5em 0;
    font-family: Arial, Verdana;
    font-size: 10px;
    text-align: center;
}
</style>
<body>

<div id="header">
    <h1>LOGO</h1>
    <ul>
        <li><a href= ""> Home </a></li>
        <li><a href= ""> Logout </a></li>
    </ul>
    <div class="clear"></div>
</div>

<div id="navigation">
    <ul>
        <li><a href="">Home</a></li> 
        <li><a href="">My account</a></li> 
        <li><a href="">Help</a></li> 
        <li><a href="">Contact Us</a> </li> 
    </ul>

    <div class="clear"></div>
</div>

<div class="body">
    <div id="personalised">
        <p>Hey there</p>
        <div class="clear"></div>
    </div>

    <div id="content">

    </div>
</div>

<div id="footer">
    <p>&copy; TEST</p>
</div>
</body>
</html>

编辑：查看您的内容声明，您正在寻找 CSS 的最小高度。min-height 将其设置为最小高度并在必要时增长。溢出：自动；表示如果您的内容超出最大高度，请添加滚动条。

于 2013-02-15T00:56:45.727 回答
1

我认为罪魁祸首是这样的：

#content {
overflow: auto;
height: 29em;}

您正在明确设置内容 div 的高度。尝试将其设置为继承。

这是一个小提琴，容器根据其中的元素数量增长：

http://jsfiddle.net/pUb6q/2/

使用您的布局。变化是

#content {
    border:1px solid black;
    float: right;
    overflow: auto;
    height: inherit;
}
于 2013-02-15T00:55:57.850 回答