如何使用 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>
最佳答案
我已经运行了这段代码，它似乎没问题。标题 div 是主体的 100%，这又是视口(viewport)的整个宽度。
更新回复评论:
我终于明白了。您有一个错误的假设，即图像正在扩展 body 。事实上，你的 body 保持在 950px，即使有最小宽度，因为图像没有扩大它。所以 100% 实际上是正确的。
问题不在于宽度设置，而是 Mid-div 上的 float 。 float 使其脱离布局，因此该 div 的内容不会将页面推得更大。你必须找到一种消除 float 的方法。你还有一个 950 的最大宽度，所以如果你想让 body 变大，你必须摆脱它。否则图像将被裁剪。如果裁剪图像是可以接受的，那就完美了。 :-)
我的建议是从头开始重新考虑您的方法，我敢肯定听到这个很糟糕。这里加一点，那里加一点，减去一些东西，改变一个值……这些都会导致一团糟。你要解决的问题应该很简单，不需要太多的规则...写一些“要求”(页面必须做什么，在什么情况下)然后重写CSS。
无论如何，这是 sandeep 的 fiddle 的“概念验证”分支，没有 float ；图像被剪裁而不是扩展主体(由于最小宽度):
关于html - 当其他div中的内容宽度大于100%时，div不显示100%宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9986866/