Total width of DIV problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-18 18:22 出处：网络

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

相关专题：css width xhtml

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,

Zlatko

How 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: