Question

我有一些标记：

<div class="header">Unknown content size</div>
<div class="main"></div>

两个块应具有恒定高度：header.height + main.height = 100％窗口高度。如果标题具有固定高度，则没有问题：对于具有top的main的位置绝对：header.height和bottom：0。但标题可能包含不同的内容。

我需要支持IE7 +，因此flexbox布局不是答案。表布局非常适合这个问题，但我需要绝对定位＆＃34; main＆＃34;块。

没有JS

可能是不可能的

喜欢那样： enter image description here

Answer 1

我真的不明白你的问题。但我可以猜到并做到了 here 请告诉我，这是你要找的？如果没有抱歉：）

<强> HTML

<div id="header">
    <p>Header</p>
    <p>Some text</p>
</div>
<div id="main">Content</div>

<强> CSS

#header {
    background:#333;
    color:#FFF;
    width:100%;
    float:left;
    text-align:center;
}
#main {
background:green;
    color:#FFF;
    width:100%;
    float:left;
    text-align:center;
}

<强> JS

var winHeight = $(window).height();
var headHeight = $("#header").height();

$("#main").height(winHeight-headHeight);

Answer 2

是的，你可能需要一个javascript文件。

我做了一些工作。它会对你有用。

<强> HTML

<body>
    <div class="header"><h2>Header content will be here</h2></div>
    <div class="main"><h1>Main content will be here</h1></div>
</body>

<强> CSS

*{margin:0px;padding:0px;}
body {position:absolute;width:100%;height:100%}
div.header {position:fixed;background:#FC0;top:0;z-index:2;width:100%;}
div.main {background:#CCC;position:relative;}

<强>的Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    (function($){
      //detect the width on page load
      $(document).ready(function(){
        var main_height = $(window).height();
        var header_height = $(".header").height();
        $(".main").height(main_height - header_height).css('padding-top', header_height);
      });
    })(jQuery);
</script>

您可以查看演示here.

位置：绝对顶级未知

2 个答案: