Question

我有两个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;
}

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

Answer 1

你可以尝试

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

当然，用屏幕尺寸和适合的百分比替换800px和75％

Answer 2

这是你在找什么？

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>

DEMO：http://jsfiddle.net/HFuCe/30/

我可以将div调整到另一个div的最小宽度吗？

2 个答案: