phpstudy集成环境

 首页 > 如何使一个盒子模型 横向填充满整个页面

如何使一个盒子模型 横向填充满整个页面

一个页面大概是这样结构
html文件以下：

<html>
    <body>
        <div class="header">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
        <div class="main_body"></div>
        <div class="footer"></div>
    </body>
</html>

css文件以下：

body{
background: #006600;/*绿色背景*/;
width:100%;
}
.header{
background:#660000;/*红色背景*/;
width:100%;
}
.main_body{
background:#000066;/*蓝色背景*/;
width:100%;
}
.header{
background:#666600;/*黄色背景*/;
width:100%;
}
.header ul{
width:800px;/*导航栏设置固定宽度*/
}
.header ul li{
float：left;   /*导航栏中的元素横行排布*/
}

当浏览器全屏的情况下
没有问题；
但是当缩小浏览器的情况下向右滑动底部滚动条
header部分明显没有填充横向整个页面；
如图：（蓝色和黄色分别是文章主体和页脚部分可以忽略，这里用数字代替图中的单词）

那么如何解决？（滚动条不要去掉;为了适应不同屏幕、不同浏览器，也不要设置固定的宽度例如流行的1210px、980px.)

既然header已经固定800px了？main_body如果还要充满页面？不应该也是800px么？
好吧～替你改一下～
.main_body{
background:#000066;/蓝色背景/;
width:100%;
min-width:800px;
}
.footer{
background:#666600;/黄色背景/;
width:100%;
min-width:800px;
}
.header ul{
width:800px;/导航栏设置固定宽度/
}

body {
    margin: 0;
    padding: 0;
}

你的li设置float之后会导致父元素的宽度崩塌，建议用display: inline;

【热门文章】
【热门文章】