Total width of DIV problem
I have a DIV section that would like to use it as a "component" in a variety of contexts. For "component", I mean it will be automati开发者_开发知识库cally included in some places of the HTML page that could not be foreseen.
The required behaviour of the DIV section is that it's width should be always 100%, meaning it should totally fill the parent. A problem appears because of the fact that the total width of DIV is sum of inner width + paddings + margins. My paddings for the DIV section are:
padding-left: 10px;
padding-right: 10px;
The question is: how am I supposed to set the width of the DIV section when I don't know the width of the parent, but want to be 100%? There isn't something like 100% - 2 * 10px...
Preferrably, I wouldn't use javascript or JQuery for this kind of layout problem.
Thanks in advance,
ZlatkoHow about nesting the Divs?
<html>
<head>
<title>Div Test</title>
</head>
<body>
<div class='outerDiv' style=' background-color: red;margin: 0px; padding: 0px 10px;'>
<div class='innerDiv' style='width: 100%; background-color: yellow; margin: 0px; padding: 0px;'>
Whatever
</div>
</div>
</body>
</html>
Hope this helps.
Leave the width at auto. Unless you are doing something like floating it of fiddling with its display (which you shouldn't, given what you are trying to achieve) that will cause the width to use the remaining space.
That's what the box-sizing attribute is there for. See this guide.
You could either remove the padding from the component, which would solve your problem directly. However, I'm assuming you won't/can't do this for some reason. Therefore, if the component div will always be inside a parent div, how about setting the parent div's overflow to hidden. Simply add this to the parent element CSS:
.parent {overflow: hidden;}
Anything flowing over the parent should now be hidden.
加载中,请稍侯......
精彩评论