3

我有两个 div，一个用于主页内容，另一个用于侧边栏。

两者都将宽度设置为百分比，因此如果调整窗口大小，它们将保持其比例。但是，侧边栏有一个最小宽度，因为该内容在开始看起来破碎之前只能调整这么多。当窗口被调整到足够小的最小宽度时，侧边栏开始侵占主页内容，因为主页内容不知道它现在需要占用比定义的百分比更小的百分比对于侧边栏。我试图做到这一点，当我们有足够的宽度时，主要内容和侧边栏可以保持各自的比例，但是当我们到达侧边栏内容开始看起来破碎的地步时，主要内容会调整它的宽度更多的补偿。

有没有办法用 css/html 做到这一点，或者我需要编写一些 JavaScript 来计算新的宽度并动态调整样式表中的值？

这是我所拥有的（简化）示例：

HTML：

<div id="maincontent">
    <!-- Main page content here -->
</div>

<div id="sidebar">
    <!-- Sidebar content -->
</div>

CSS：

#maincontent
{
    width: 85%;
}

#sidebar
{
    width: 15%;
    min-width: 120px;
}

在这个例子中，只要浏览器窗口的宽度超过 800 像素，一切都会很好。但是一旦我们降到 800px 以下，maincontent 现在需要变得小于 85%，以弥补 120px 超过浏览器宽度的 15% 的事实。

4

2 回答 2

6

你可以试试

@media all and ( max-size: 800px )  {
    #maincontent { width: 75%; }
}

当然，将 800px 和 75% 替换为适合的屏幕尺寸和百分比

于 2012-08-02T15:29:00.970 回答
1

这是你想要的？

CSS

#maincontent{
 background-color:orange;  
 }

 #sidebar
 {
 background-color:blue; 
 width:15%;
 min-width:120px;
 float:left;
 }

HTML

<div id="sidebar">
 I am the sidebar!
</div>

 <div id="maincontent">
 I am the main content!
 </div>

演示：http: //jsfiddle.net/HFuCe/30/

于 2012-08-02T15:41:26.177 回答