Question

所以我有这个结构作为模板，它与页面上的完整内容工作正常，如果文本或图像不填充所有高度叉不好，然后列和内容div看起来切割如果我为他们的字段着色。的index.html

 <!DOCTYPE html>
    <html>
     <head>
    <link rel="stylesheet" href="css/grad.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu.css">
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="header">
      <div align="center"><img src="img/tsu._e.png" border="0" align="middle"></div> 
    </div>
    <div id="gradient"></div>
    <div id="content">
        <div id="content1">
            <div id="content2">
                <div id="content3">
                    <div id="center">

                    </div>
                </div>
            <div id="left"></div>
        </div>
    </div>
    <div id="right"></div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

的CSS：

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#0000FF; height:100px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }
#left { background:#FFFFFF; width:200px; float:left; }
#center { background:#FFFF; margin-left:200px; }
#right { background:#FFFFFF; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#0000FF; width:100%; height:60px; }

gradien hight 3px

问题：为什么div id=content不要填充100％的身高？以及在这种情况下如何修复它？

Answer 1

而不是

height:100%;

使用

height:100vh;

Answer 2

似乎你没有100％的#content

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;

尝试

#content { height:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;

你所有内部div都是空的

Answer 3

取出你身体的相对位置并给出一个高度：100％到你的内容

CSS在这种情况下如何制作100％的高度

3 个答案: