如何在没有javascript的情况下使用css混合依赖于内容和百分比高度/宽度[重复]答案

【问题标题】：How-to mix content-dependent and percentage height/width using css without javascript [duplicate]如何在没有javascript的情况下使用css混合依赖于内容和百分比高度/宽度[重复]
【发布时间】：2011-10-07 15:53:04
【问题描述】：

我想实现这样的布局：

 -----------------------------------------------------------
|                                                          |
|  header height is its content dependant.                 |
|  its height is not set.                                  |      
|  it is as heigh as its content stretches it              |
|----------------------------------------------------------|
|                                                      | s |
| takes all the rest available screen height           | c |
| it is fluid height, not fixed,                       | r | 
| dependent on the screen height                       | o |
|                                                      | l |   
|                                                      | l |
|                                                      | b |
|                                                      | a |
|                                                      | r |
------------------------------------------------------------

使用css和html，没有javascript，可以吗？滚动条应该从上到下完全可见。

这里设置了一个示例布局http://jsfiddle.net/uKejq/9/ 我想实现相同的目标，但不使用 javascript。有可能吗？

【问题讨论】：

你是说这个问题的“使用 JavaScript”吗？
不同之处只有一个但非常重要的一点：标题高度应该取决于其内容，而不是像上一个问题那样固定。
对三十点：不，我的意思是不使用 javascript。使用 javascript 时，我在 jsfiddle 上设置了一个示例。我想在不使用 javascript 的情况下达到同样的效果。
你不应该问一个问题，然后改写一下并重新问。 oezi 指出，在这个问题之前不久，同一个 OP 也问了同样的问题。
@Chris：我明白你在说什么，但在我回答后问题完全改变了，OP 意识到他真正想要什么。根据这个元问题，最好在这种情况下提出一个新问题：meta.stackexchange.com/questions/96560/…

标签： html css layout

【解决方案1】：

请参考这里，

移除边框并调整所需的宽度。

CSS

#headerWrapper{
    border:1px solid black;
    width:302px;
}
#header{
    border:1px solid red;
    min-width:300px;
    min-height:100px;
    background:green;

}
#headerScrl{
    width:300px;
    height:100px;
    overflow:scroll;
}

HTML

<div id="headerWrapper">
    <div id="header">
        header
   </div>
   <div id="headerScrl">
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    <p> content </p>
    </div>
</div>

http://jsfiddle.net/uKejq/1/

【讨论】：

留个小问题：要适合页面$-)
移除所有宽度或添加宽度100%
您的标题是固定高度的，整个内容不适合页面。不太对。。
jsfiddle.net/uKejq/5/show 我没有放任何标题内容，现在给出 min-height 只是为了显示
@Sarath Saleem 删除高度而不是宽度

【解决方案2】：

css:

* {margin:0px;padding:0px;overflow:hidden}
body {
    overflow: hidden;
}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px; border: 1px solid #000}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px; overflow: scroll;}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="header"></div>
<div id="wrapper">
    saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>
    </div>
</body>

【讨论】：

页眉高度不流畅。
@Subdigger：感谢您提出解决方案，但正如 30dot 已经提到的那样 - 如果标题高度不固定，但可以拉伸以适应其内容。