当其他div中的内容宽度大于100％时，div不显示100％宽度
[英]div doesn't display 100% width when the content width in other div is greater than 100%
问题描述
How can I make DIV width 100% (body width) with CSS? 
如何使用CSS将DIV宽度设为100％（车身宽度）？ Currently, my div (.MainHeading) width is set as 100%, but it doesn't display like 100% when the content width in another div is greater than the screen size. 目前，我的div（.MainHeading）宽度设置为100％，但是当另一个div中的内容宽度大于屏幕尺寸时，它的显示效果不会达到100％。 It just displays in top-left corner. 它仅显示在左上角。
I've been searching for the solution for some time but I haven't found it yet... 我一直在寻找解决方案，但是还没有找到...
This is my CSS: 这是我的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;
}
And here is my HTML code: 这是我的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>
3 个解决方案
解决方案1
0 2013-03-19 16:59:41
I know I'm answering like a year after this question was asked, but I just had the same issue and found this post; 我知道在问了这个问题一年后，我正在回答，但是我也遇到了同样的问题，并且找到了这篇文章。 the base for my answer is the one already published by sandeep. 我的答案的依据是sandeep已发布的答案。
Define min-width to 950 on your .MeanHeading div, that should do the trick, however it has a downside, it would be the minimum width of your heading if you dont have a problem with this I think you are good to go. 在您的.MeanHeading div .MeanHeading min-width定义为950，应该可以解决问题，但是它有一个缺点，如果您对此没有问题，那将是您的标题的最小宽度，我认为您可以这样做。
解决方案2
0 已采纳 2012-04-03 04:19:08
I've run this code and it seems to be fine. 我已经运行了这段代码，看起来还不错。 The heading div is 100% of the body, which in turn is the full width of the viewport. 标题div是主体的100％，又是视口的整个宽度。
Update in reply to comment: 更新以回复评论：
I finally see now. 我终于看到了。 You have a mistaken assumption, which is that the image is expanding the body. 您有一个错误的假设，那就是图像正在扩大身体。 In fact, your body remains at 950px, even with min-width, because the image is not expanding it. 实际上，即使图像的最小宽度，您的身体也保持在950像素，因为图像没有在扩大。 So the 100% is actually correct. 因此100％实际上是正确的。
The problem isn't the width setting, it's the float on your Mid-div. 问题不在于宽度设置，而在于您的Mid-div上的浮动。 Floating takes it out of layout, so the contents of that div are not pushing the page larger. 浮动会使它脱离布局，因此该div的内容不会将页面推得更大。 You have to find a method that eliminates the float. 您必须找到消除浮点数的方法。 You also have a max-width of 950, so if you want the body to grow, you have to get rid of that. 您还具有950的最大宽度，因此，如果要使身体成长，就必须摆脱它。 Otherwise the image will simply clip. 否则，图像将被简单裁剪。 If clipping the image is acceptable, then perfect. 如果裁剪图像是可以接受的，则完美。 :-) :-)
My advice, and I'm sure it sucks to hear this, is to rethink your approach from the ground up. 我的建议是重新思考您的方法，我相信听到这很糟。 Adding a bit here and a bit there, subtracting something, changing a value... these are going to lead to a mess. 在这里加一点，在那儿减去一些东西，改变一个值...这些都会导致混乱。 The problem you want to solve should be very simple and require not too many rules... write some "requirements" (what must the page do, and under what circumstances) and then rewrite the CSS. 您要解决的问题应该非常简单，并且不需要太多规则...写一些“要求”（页面必须做什么，在什么情况下），然后重写CSS。
In any event, here's a "proof of concept" branch of sandeep's fiddle without the float; 无论如何，这是Sandeep小提琴的一个“概念证明”分支，没有浮子。 the image is clipped rather than expanding body (due to min-width): 图像被裁剪而不是扩大主体（由于最小宽度）：
解决方案3
0 2012-04-03 04:23:58
Define min-width to your body . 定义身体的 min-width 。 write like this: 这样写：
body{
min-width:950px;
}
Check this http://jsfiddle.net/ZMWpW/ 检查此http://jsfiddle.net/ZMWpW/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.