Question

这可能是一个非常基本的CSS问题，但我尝试按照书中的说明创建我的流畅布局，到目前为止我的标题和导航栏似乎在这个地方，但内容div不是，我也是喜欢使我的内容高度灵活，因为它是一个动态的Web应用程序，所以页脚应该相应地位于它下面。好的，这就是id想要实现的模型 enter image description here

<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;}

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

Answer 1

首先尝试处理格式化。（这不是太糟糕，但可以使用改进。）这对您来说最大的好处之一就是您可以阅读的代码。你可以看看我在这里所做的事情并玩你喜欢的东西。 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的最小高度。最小高度将其设置为最小高度并在必要时增长。溢出：自动;如果您的内容超出最大高度，请添加滚动条。

Answer 2

我认为罪魁祸首是：

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

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

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

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

使用您的布局。这些变化是

#content {
    border:1px solid black;
    float: right;
    overflow: auto;
    height: inherit;
}

流体布局定位div

2 个答案: