Question

如何使用CSS制作DIV宽度100％（正文宽度）？目前，我的div（.MainHeading）宽度设置为100％，但当另一个div中的内容宽度大于屏幕大小时，它不会显示为100％。它只显示在左上角。

我一直在寻找解决方案，但我还没有找到它......

这是我的CSS：

body 
{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.MainHeading
{
margin: 0 auto;
background-color:Gray;
background-repeat:repeat-x;
height:auto;
min-height:93px;
width:100%;
}
.Body-Area
{
margin:0 auto;
overflow:visible;
width:950px;
max-width:950px;
height:100%;
min-height:395px;
}
.Container
{
display:table-row;
position:relative;
}
.Mid-Div
{
display:table-cell; 
position:relative;  
padding-left:2%;
padding-right:2%;
float:left; /*for IE 7 & 9 Compatible View*/
overflow-x:auto;/*for IE 8*/
vertical-align:top;
width:100%;
max-width:950px;    
overflow:hidden;
}

这是我的HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div class="MainHeading">
    </div>
    <div class="Body-Area">
        <div class="Container">
            <div class="Mid-Div">
                 <img align="bottom" width="1224" vspace="1" lang="en"  hspace="1" height="332" border="1" src="images/cover2.png" alt="Test" id="imgtest" dir="ltr" />
            </div>
        </div>  
    </div>
</body>
</html>

Answer 1

我已经运行了这段代码，似乎很好。标题div是主体的100％，而后者又是视口的整个宽度。

更新回复评论：

我终于看到了。你有一个错误的假设，那就是图像正在扩展身体。实际上，即使是最小宽度，您的身体仍然保持950px，因为图像不会扩展它。所以100％实际上是正确的。

问题不在于宽度设置，而是Mid-div上的浮动。浮动将其从布局中取出，因此该div的内容不会将页面推大。你必须找到一个消除浮动的方法。你也有最大宽度950，所以如果你想要身体成长，你必须摆脱它。否则图像将简单地剪辑。如果裁剪图像是可以接受的，那么完美。： - ）

我的建议，我确信听到这个很糟糕，就是重新思考你的方法。在这里稍微添加一点，减去一些东西，改变一个值...这些将导致一团糟。您想要解决的问题应该非常简单，并且不需要太多规则...写一些“要求”（页面必须做什么，以及在什么情况下），然后重写CSS。

无论如何，这里是桑迪普小提琴的“概念证明”分支，没有浮动;图像被剪裁而不是扩展体（由于最小宽度）：

http://jsfiddle.net/ZMWpW/1/

Answer 2

将min-width定义为正文。写得像这样：

body{
 min-width:950px;
}

选中此http://jsfiddle.net/ZMWpW/

Answer 3

我知道在问这个问题后我回答了一年，但是我遇到了同样的问题，发现了这个帖子;我答案的基础是sandeep已经发布的答案。

在min-width div上将.MeanHeading定义为950，这应该可以解决问题，但它有一个缺点，如果你没有这个问题，它将是你标题的最小宽度我认为你很高兴。

当其他div中的内容宽度大于100％时，div不显示100％宽度

3 个答案: