How-to mix content-dependent and percentage height

2019-07-03 20:52发布

站内问答 / HTML/CSS
958 2 5

This question already has an answer here:

I want to achieve a layout like this: 

 -----------------------------------------------------------
|                                                          |
|  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 |
------------------------------------------------------------

Using css and html, without javascript, is it possible? Scrollbar should be completely visible, from top to bottom.

An example layout is setup here http://jsfiddle.net/uKejq/9/ I want to achieve the same, but without using javascript. is it possible?

标签： html css layout
举报
2条回答
啃猪蹄的小仙女
2楼-- · 2019-07-03 21:19

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>
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-07-03 21:30

Please refer to this,

Remove the borders and adjust the width that you want.

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)