0

我想做这个。

在此处输入图像描述

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

4

4 回答 4

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 插入一个固定值...

于 2013-10-13T15:30:07.573 回答
1

CSS3 calc 可以做到这一点。

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

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

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

我强烈建议您使用边框框来处理 calc,它使一切变得容易得多。

* {box-sizing: border-box;}
于 2013-10-14T13:19:55.200 回答
0

当您尝试增加内容大小时..您还需要增加最外层 div 的大小。否则内容 div 和固定 div 将无法平滑对齐。你可以通过脚本来完成。

于 2013-10-13T15:19:50.367 回答
0

无论如何,也许这个任务的措辞不好,只是我用 CSS 实现的。

contentdiv 可以是 100%,但margin-right应该设置为(siderbar.marginLeft + sidebar.width + sidebar.marginRight). 对于 100%,它有一个明确的宽度,因此它会适合它的内容。

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

于 2013-10-14T13:14:55.080 回答