剩余宽度div必须符合它的内容?

时间:2013-10-13 15:08:00

标签: css html layout

我想这样做。

enter image description here

我有更改包装宽度(有时它是100%,有时它是固定宽度)。侧边栏内容设计为固定250px宽度,内容应灵活。但是当我将内容设置为{ width: 100%; }时,它只是不适合它的溢出内容。

4 个答案:

答案 0 :(得分:1)

如果我理解你在寻找什么,你不能单靠css / html来做。我使用javascript来获取包装器宽度,然后减去固定元素的宽度并将其设置为内容div的值。见下文:

  

var wrapW = document.getElementById(“wrapper”)。clientWidth;

     

var contW = wrapW - (sideWidth + marginWidths);

     

document.getElementById(“content”)。style.width = contW +“px”;

显然在上面的示例中,您将为sideWidth和marginWidths插入固定值...

答案 1 :(得分:1)

CSS3 calc可以做到这一点。

#content {width: calc(100% - 250px);}
#sidebar {width: 250px;}

确保您需要的浏览器支持此属性。 Here是受支持的浏览器。并且不要忘记特定于浏览器的前缀。像这样:

#content {
  width: 700px; /* Fallback for older browsers */
  width: -webkit-calc(100% - 250px);
  width: -moz-calc(100% - 250px);
  width: calc(100% - 250px);
}

我强烈建议您使用border-box来处理calc,它会让一切变得更容易。

* {box-sizing: border-box;}

答案 2 :(得分:0)

当您尝试增加内容大小时...您还需要增加最外层div的大小。否则内容div和固定div将无法顺利对齐。你可以通过脚本来做到这一点。

答案 3 :(得分:0)

无论如何,攻击可能是一个糟糕的措辞,只是我用CSS实现了。

content div可以是100%,但margin-right应设置为(siderbar.marginLeft + sidebar.width + sidebar.marginRight)。 100%它具有明确的宽度,因此它将适合它的内容。

请参阅660px和960px之间的eppz.eu/blog