Question

遇到问题我一直试图弄清楚几个小时了！我正在自己的网站ATM上工作，我有3个div，一个标题（静态高度），主要（动态高度）＆amp;页脚（静态高度）。问题是我希望我的主div总是填满剩余的屏幕空间 - 但如果主内容超出了剩余的屏幕空间，它应该只是环绕它。

我不确定为什么我无法让它发挥作用。我尝试了很多不同的东西，比如：display：table，overflow等等 - 但似乎没有一个能达到预期的效果。

我希望用纯粹的css完成这项工作，但我似乎有点失落 - 所以如果有人能指出我正确的方向，我会成为一个快乐的冠军：）

Answer 1

我不确定你在说什么，但试试这个：

的CSS：

div.main{
   width: 99%;
   max-width: 99%
}

（我给它99％的原因是，通常100％是一点点。）

最大宽度应该使它不会变宽。

Answer 2

这应该可以解决你的问题！我写了一些评论，以防你想了解它的工作原理。

这是JSFiddle： http://jsfiddle.net/Vuc5F/5/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
body, body * {
    border: red 1pt solid;
    margin:0;
    padding:0;
}
header, footer {
    height: 100pt;
}
section {
    width: 100%;    
    clear: both;
    border: blue 5pt solid;
}
article {
    height: 1000px;
    border: green 10pt solid;
}
footer {
    /*set it to absolute to make it stay at the bottom only;*/
    width: 100%;
}
    </style>
</head>
<body>
<header>header</header>
<section>
    <article>
        article
    </article>
</section>
<footer>footer</footer>
</body>
</html>

CSS包装内容否则填充剩余高度

2 个答案: