CSS布局问题集锦

这里介绍下自己在实践过程中遇到的一些css布局的问题,一方面做个备忘,也希望给大家带来一点帮助。
  • 如何让div显示为整个页面的高度
    我们有时希望一个container显示为整个页面高度,很容易想到将它的高度设置为100%,可是实际显示的效果却不是我们想要的。我用一张张图说明原因:

    CSS布局问题集锦_第1张图片

    html和body默认高度都是匹配内容高度的,我们想要让container的高度和页面高度一样,得先把html和body的高度设置为100%

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>两列布局</title>
        <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body{ height: 100%; } .container{ height: 100%; background-color: #B0B0B0; } </style>
    </head>
    <body>
        <div class="container">
            <div class="left">我是left</div>
            <div class="right">我是right</div>
        </div>
    </body>
</html>
  • 如何做两列布局,并且做到等高
    现实中经常见到这种的页面——左边是导航链接,右边是内容,当显然右边的内容页的高度会比左边的导航页的宽度高,那怎么让左边随着右边的高度增加而增加呢?
    其实做到两点就好了,第一:设置左边的宽度为固定值A,float为left,右边的div的margin-left为固定值A;第二:在左边div和右边div的css里分别加上margin-bottom: -2000px;padding-bottom: 2000px; 2000是个很大的值,你可以设得更大。这样就做到了等高。
    <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body{ height: 100%; } .container{ height: 100%; background-color: #B0B0B0; } .left{ float: left; background-color: #FFFFFF; width: 150px; margin-bottom: -2000px; padding-bottom: 2000px; padding-left: 20px; padding-top: 20px; } .left ul li{ list-style: none; } .left ul li a{ text-decoration: none; } .right{ margin-left: 150px; text-align: center; background-color: antiquewhite; /*height: 100%;*/ padding-top: 20px; margin-bottom: -2000px; padding-bottom: 2000px; } </style>

查看demo

你可能感兴趣的:(css,布局)