问题描述:

I have a few divs in some other divs, and I want my page height to be constant, so I want to use overflow-y: scroll in my divs so the main wrapper is always 80% of the total height. As you can see here, it just makes the page bigger, it doesn't add a scrolling thing (even if it's rendered, it's not usable).

#messages_messageUIWrapper {

width: 90%;

margin: auto;

display: block;

background-color: gray;

height: 80%;

max-height: 80%;

overflow: hidden;

}

#messages_contentWrapper {

display: block;

background-color: gray;

float: left;

width: calc(100% - 260px);

height: 100%;

max-height: 100%;

overflow-y: scroll;

}

#messages_peoplePicker {

background-color: gray;

display: block;

float: left;

width: 260px;

overflow-y: scroll;

}

How can i fix that ?

Thank you in advance

网友答案:

Try like this: Demo

CSS:

html, body { 
    height:100%;
}

#messages_peoplePicker {
    background-color: yellow;
    display: block;
    float: left;
    width: 260px;
    height: 100%;
    max-height: 100%;
    overflow-y:scroll;
}

Edit: If you want full height, you can use like this: Demo

CSS:

html, body { 
height:100%;
overflow: hidden;
} 

#messages_messageUIWrapper {
    width: 90%;
    margin: auto;
    display: block;
    background-color: gray;
    overflow: hidden;
    position:absolute; top: 0px; left:0px; right:0px; bottom:0px
}
相关阅读:
Top