How can I make DIV 100% height of browser without vertical scrolling of header

前端 未结 6 2229
遇见更好的自我
遇见更好的自我 2021-01-05 08:32

Both the left and right panels have a height of 100%, but since the Header div takes up X amount of space, there is some vertical scrolling in the window th

相关标签:
6条回答
  • 2021-01-05 08:44

    You could use overflow: hidden; to protect the body to be scrollable.

    according to your comment: http://jsfiddle.net/G7unG/9/

    0 讨论(0)
  • 2021-01-05 08:56

    You can use absolute positioning if you want to have it 100% height always. And then use scroll bars if required inside the leftpanel or the rightpanel.

    Example: http://jsfiddle.net/G7unG/2/

    html, body{
        height: 100%;
        margin: 0;
    }
    .header{
        background: #333;
        padding: 15px;
        text-align:center;
        font-size: 18px;
        font-family: sans-serif;
        color: #FFF;
        height: 22px;
    }
    .leftpanel, .rightpanel{
        top: 52px;
        bottom: 0;
        position: absolute;
    }
    .leftpanel{
        width: 70%;
        left: 0;
        background: #CCC;
    }
    .rightpanel{
        width: 30%;
        right: 0;
        background: #666;
    }
    

    Solution 2 - use fixed percentages for height: http://jsfiddle.net/G7unG/4/

    html, body{
        height: 100%;
        margin: 0;
    }
    .header{
        background: #333;
        padding: 15px;
        text-align:center;
        font-size: 18px;
        font-family: sans-serif;
        color: #FFF;
        height: 30%;
        box-sizing: border-box;
    }
    .leftpanel, .rightpanel{
        height: 70%;
        float: left;
    }
    .leftpanel{
        width: 70%;
        left: 0;
        background: #CCC;
    }
    .rightpanel{
        width: 30%;
        float: right;
        background: #666;
    }
    
    0 讨论(0)
  • 2021-01-05 08:57

    Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.

    HTML:

    <div id = "wrapper">
        <div class="header">Header</div>
        <div>
            <div class="leftpanel">Left Panel</div>
            <div class="rightpanel">Right Panel</div>
        </div>
    </div>
    

    CSS:

    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    html, body {
        height: 100%;
    }
    
    .header{
        background: #333;
        padding: 15px;
        text-align:center;
        font-size: 18px;
        font-family: sans-serif;
        color: #fff;
    }
    
    .leftpanel{
        background: #CCC;
    }
    
    .rightpanel{
        background: #666;
    }
    
    #wrapper {
        height: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        outline: 1px solid red;
    }
    
    #wrapper > .header {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    
    #wrapper > .header + div {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    
    #wrapper > .header + div > div:first-of-type {
        -webkit-flex: 7 0 0;
        flex: 7 0 0;
    }
    
    #wrapper > .header + div > div:last-of-type {
        -webkit-flex: 3 0 0;
        flex: 3 0 0;
    }
    
    0 讨论(0)
  • 2021-01-05 08:57

    Use viewports. Browsers now support giving height a percentage of page height. Drop the 100 down to 80 if you've got a header taking up space.

    div {
        height:100vh;
    }
    
    0 讨论(0)
  • 2021-01-05 08:59

    You could use a "faux columns" type of structure -- adding the background color of your columns as "fixed" elements (they wont scroll with the page) behind your real columns.

    <div id="left_faux"></div>
    <div id="right_faux"></div>
    
    div#left_faux {
        position: fixed;
        top:0;
        left:0;
        right:30%;
        bottom:0;
        background-color:#CCC;
    }
    div#right_faux {
        position: fixed;
        top:0;
        left:70%;
        right:0;
        bottom:0;
        background-color:#666; 
    }
    
    .leftpanel{
        float: left;
        width: 70%;
    }
    .rightpanel{
        float: left;
        width: 30%;
    }
    

    This quick example is perhaps overly verbose, for demonstration purposes. I'm sure you can streamline the CSS so there aren't so many redundant definitions.

    WORKING EXAMPLE

    0 讨论(0)
  • 2021-01-05 09:02

    Like this: http://jsfiddle.net/G7unG/3/

    html, body{
        height: 100%;
        margin: 0;
        overflow:hidden;
    }
    
    0 讨论(0)
提交回复
热议问题