如何在不使用JavaScript的情况下，使用CSS混合内容相关和百分比高度/宽度？

Question

如何在不使用JavaScript的情况下，使用CSS混合内容相关和百分比高度/宽度？

3

我希望实现这样的布局：

 -----------------------------------------------------------
|                                                          |
|  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。是否可能？

- fedor_bel

你是说这个问题需要“使用 JavaScript”吗？ - thirtydot

2

它在一个非常重要的地方与之前的问题不同：标题高度应该是其内容相关的，而不是固定的。 - fedor_bel

给thirtydot：不，我的意思是不使用JavaScript。当我使用JavaScript时，我已经在jsfiddle上设置了一个示例。我想在不使用JavaScript的情况下实现相同的效果。 - fedor_bel

你不应该问一个问题，然后稍微改一下措辞再重新问。oezi指出同一个提问者在不久之前已经问过同样的问题了。 - Chris Snowden

1

@Chris：我明白你的意思，但在我回答问题之后，问题完全改变了，并且提问者意识到他*真正想要的是什么。根据这个元问题，建议在这种情况下提出一个新问题：http://meta.stackexchange.com/questions/96560/significantly-edit-existing-question-or-ask-a-new-question-after-answer-accepted - thirtydot

@thirtydot，好的，那就没问题了。 - Chris Snowden

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sarath · Answer 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/

- Subdigger · Answer 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>