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

我有两个div，一次用于主页内容，另一个用于侧栏。我可以将div调整为另一个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像素。但是一旦我们降到800像素以下，主要内容现在需要变得小于85％，以弥补120px超过浏览器宽度15％的事实。

来源

2012-08-02 Blobinator

你可以尝试

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

当然

，更换800像素和75％的适合

来源

2012-08-02 15:29:00 Xhynk

我没有读这个答案（和随后将其输入到谷歌）之前知道关于@media查询。有了一些修补，这应该很好地服务于我的目的。谢谢！ – Blobinator 2012-08-02 15:42:28

我的荣幸！ @media查询是一个很棒的工具，但它们不适用于旧版本的IE：/。请记住，您可以设置最小和最大尺寸！语法是@media all和（min-size：600px）和（max-size：800px）' - 然后开始下一个，最大尺寸为599px。祝你好运！ – Xhynk 2012-08-02 15:49:00

屏幕尺寸和百分比这是你在找什么？

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/

来源

2012-08-02 15:41:26 Dom

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

回答

相关问题