开发者

css problem-liqiud layout-cannot use height in pixels-min height not working

开发者 https://www.devze.com 2023-02-05 11:09 出处:网络
As I am designing a liquid layout all my width and height are in %. but while designing I have to see whats going on with my css so I gave height in pixe开发者_开发技巧ls (temporarily) as that height

As I am designing a liquid layout all my width and height are in %. but while designing I have to see whats going on with my css so I gave height in pixe开发者_开发技巧ls (temporarily) as that height (in %) will be filled from data from database.presently no database is designed. I cannot use pixels so i tried min-height property to see my css result.. but thats also not working.What sholud i do?


If you use a % height, the height is calculated in relation to its parent container. This often trips people up as the following cannot reasonably be calculated:

<body>
    <div style="height: 100%;">Hello World</div>
</body>

We are asking the browser to render the div at "100%" - but the browser cannot apply this style as the body has no explicit height.

To fix this, you need to give a height to the html and body, like this...

html, body {
    height: 100%;
}

This now gives the div a height to work to - which will essentially equate to the size of the view port.

This applies to height and min-height.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号