三列浮动中间列宽度自适应

最新推荐文章于 2021-11-28 00:32:42 发布

翻译最新推荐文章于 2021-11-28 00:32:42 发布 · 642 阅读

文章标签：

#border #div #html #文档

CSS+DIV相关内容专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用CSS实现全屏布局的方法，通过设置body和html的高度为100%，并利用绝对定位来创建左右两侧固定宽度的侧边栏，中间部分自适应剩余空间。

<title>无标题文档</title>
<style type="text/css">
body,html   //关键在这里要同时设置body,html的属性
{
    margin:0px;padding:0px;
    height:100%;
}
#left
{
    background-color:#CCC;
    border:2px solid #333;
    width:100px;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;

}
    #right
{
    background-color:#CCC;
    border:2px solid #333;
    height:100%;
    width:100px;
    position:absolute;
    right:0px;
    top:0px;
}
   #center
{
    background-color:#CCC;
    border:2px solid #333;
    height:100%;
    margin-left:100px;
    margin-right:100px;
    top:0px;
}
</style>
</head>

<body>

    <div id="left">
    </div>
    <div id="center"></div>
    <div id="right">
    </div>

</body>
</html>