Question

首先，我想说这个HTML和CSS都是有效的。第二，嗨。

我正在创建一个博客，我记住了这个结构：

<div class="wrapper">
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>

我想把所有东西都按百分比计算，但我愿意妥协。

我的包装是我的HTML和身体的100％折扣。

html, body{
height:100%;
width:100%;
margin:0px;
overflow:auto;
}

在所述包装器中，我有一个标题，我希望它是总包装器高度的10％，内容是父级的80％和5％的页脚。我真正的问题是内容div，如果文本较少，我希望它为80％，如果有更多文本则扩展更多，但我希望其他元素具有相同的高度。

我尝试了不同的线程和网站上的各种解决方案，但没有任何方法真正按照我想要的方式工作，我也试过在一些irc频道中询问，但他们也没有帮助我。

CSS：

.wrapper{
border:2px solid black;
height:100%;
width:70%;
margin:0 auto;
position:relative;
}

.header {
border:2px solid yellow;
min-height:10%;
margin:0 0;
overflow:hidden;
position:relative;
display:block
}

.footer {
border:2px solid blue;
min-height:35px;
margin:0 0;
bottom:0;
position:relative;
}

.content {
min-height:auto;
border:2px solid green;
margin:0 0;
padding:0;
position:relative;
}

html, body{
height:100%;
width:100%;
margin:0px;
overflow:auto;
}

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> Blog </title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="content">
        <p>*insert big text here*</p>
        </div>
        <div class="footer"></div>
    </div>
    </body>
</html>

Answer 1

我决定做点别的。我正在把包装器带走，因为它真的很烦人，而且我的所有div都以margin为中心：0，auto;我给了所有divs宽度：70％，现在一切正常。这是我的 CSS：

.wrapper{
border:2px solid black;
height:100%;
width:70%;
margin:0 auto;
position:relative;
}

.header {
border:2px solid yellow;
min-height:10%;
width:70%;
margin:0 auto;
overflow:hidden;
position:static;
display:block
}

.footer {
border:2px solid blue;
min-height:35px;
width:70%;
margin:0 auto;
bottom:0;
position:relative;
}

.content {
min-height:80%;
height:auto;
width:70%;
border:2px solid green;
margin:0 auto;
padding:0;
position:relative;
}

.navigation_bar {
font-size:20px;
border-spacing:70px 20px;
margin-left:auto;
margin-right:auto;
position:relative;
}

td {
padding:0;
}

html, body{
height:100%;
width:100%;
margin:0px;
overflow:auto;
}

body {
background: url(Static/Index/background.jpg) no-repeat center center fixed; 
}

#wrapper_background{
background: url(Static/Index/content_background.png) no-repeat;
background-size:cover; 
}

<强> HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> Blog </title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div class="header"></div>
        <div class="content">
        <p>*insert big big big text here*</p>
        </div>
        <div class="footer"></div>
    </body>
</html>

我正在以最接近的答案回答我的问题。我认为我对如何做的意见不应该影响你的答案。谢谢你的帮助！

Answer 2

你已经接受了一个答案，但是如果你对使用JavaScript / jQuery做这件事感到好奇，那你就是这样做的：

http://jsfiddle.net/MGRq8/2/

var viewportHeight = $(window).height();
var headerHeight = viewportHeight * 0.1;
var contentMinHeight = viewportHeight * 0.8;
var footerHeight = viewportHeight * 0.05;

$('#header').height(headerHeight);
$('#content').css('min-height', contentMinHeight);
$('#footer').height(footerHeight);

$(window).resize(function() {
    $("#wrapper").height($(document).height());
});

Answer 3

试试这个（但请注意，不会覆盖5％：10％+ 80％+ 5％= 95％）：

<强> CSS：

.wrapper_positioner{
margin:0 auto;
width:70%;
}
.wrapper{
position:absolute;
width:70%;
height: 100%;
}
.header {
border:2px solid yellow;
margin:0 0;
height:10%;
}

.footer {
border:2px solid blue;
margin:0 0;
height:5%;
min-height: 35px;
}

.content {
border:2px solid green;
margin:0 0;
padding:0;
height: 80%;
}

html, body{
width:100%;
height: 100%;
height: auto;
margin:0px;
}

<强> HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> Blog </title>

    </head>
    <body>
    <div class="wrapper_positioner">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">
            <p>*insert big text here*</p>
            </div>
            <div class="footer"></div>
        </div>
    </div>
    </body>
</html>

div之间的CSS高度关系

3 个答案: