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

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

html css layout

Html 当其他div中的内容宽度大于100%时，div不显示100%宽度,html,css,layout,Html,Css,Layout,如何使用CSS使DIV宽度为100%正文宽度？当前，my div.MainHeading width设置为100%，但当另一个div中的内容宽度大于屏幕大小时，它不会像100%那样显示。它只显示在左上角我一直在寻找解决方案一段时间，但我还没有找到它这是我的CSS： body { margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; } .MainHeading { margin: 0 auto;

如何使用CSS使DIV宽度为100%正文宽度？当前，my div.MainHeading width设置为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%，而主体又是视口的全宽

回应评论时更新：

我终于明白了。您有一个错误的假设，即图像正在扩展身体。事实上，你的身体保持在950px，即使是最小宽度，因为图像没有扩展它。所以100%是正确的

问题不在于宽度设置，而在于中间div上的浮动。浮动会使其脱离布局，因此该div的内容不会使页面变大。您必须找到一种消除浮动的方法。你也有一个最大宽度950，所以如果你想让身体生长，你必须摆脱它。否则，图像将被简单地剪辑。如果可以剪切图像，则完美：-

我的建议是，从头开始重新思考你的方法，我相信听到这一点很糟糕。这里加一点，那里加一点，减去一些，改变一个值。。。这些将导致一片混乱。你想解决的问题应该很简单，不需要太多的规则。。。写一些要求页面必须做什么，在什么情况下，然后重写CSS

无论如何，这里有一个概念证明分支sandeep的小提琴没有浮动；由于最小宽度，图像被剪裁而不是展开主体：

定义身体的最小宽度。这样写：

body{
 min-width:950px;
}

检查这个

我知道我在回答这个问题一年后，但我只是有同样的问题，找到了这个帖子；我的答案的基础是sandeep已经发表的答案

在你的.meansheading div上定义最小宽度为950，这应该可以做到，但是它有一个缺点，如果你没有问题，它将是你的标题的最小宽度。我认为你可以走了。

谢谢你的回答。我设置最小宽度：950px；对身体。但我不工作。通过将src=images/cover2.png替换为src=，您可以看到我的结果。谢谢您的回答。内部图像的宽度为1224。屏幕宽度为1345。因为我将宽度设置为950px，所以图像从左边距开始显示约15%。因此，图像显示屏幕宽度溢出，标题div不显示100%。您可以通过将src=images/cover2.png替换为实际图像src=，来查看它。我认为您需要澄清您的问题。你的身体是950，主航向是950，这是100%。嗨，格雷格·佩蒂特，谢谢你的回答。身体是100%。主标题是100%。只有。身体面积是950。我的问题是当图像内部。主体区域从视口宽度溢出时，.MainHeading无法填充到扩展区域。嗨，Greg Pettit，回答得很好！现在，我明白了。非常感谢-@neustroev.ai他基本上说他的答案是基于一个接一个的答案