如何在响应式布局中垂直扩展 2 个 div？

Posted 2023-03-05

【中文标题】如何在响应式布局中垂直扩展 2 个 div？

【英文标题】：How to expand 2 divs vertically in responsive layout?

【发布时间】：2012-09-10 23:22:44

【问题描述】：

我相信我会问一个非常常见的问题，因为在发布我的问题之前我也看到了相关问题，但这有点不同。通常我在垂直扩展 2 个 div 时不会遇到任何问题，但现在我正在使用引导框架开发应用程序。这是一个流畅的布局，这就是我面临一些问题的原因。请提出解决方案。这是我用的：

HTML：

<div class="main">
  <div class="left">content</div>
  <div class="right">content</div>
</div>

CSS：

.left 
    position:absolute; 
    left:0px; 
    border-right:1px solid #bfc4c9;  
    background:#ebf2f9; 
    width:280px !important;


.right 
    display:block;  
    float:left; 
    position:relative;  
    padding-right:9px; 
    margin-left:300px;  

我想垂直对齐左右 div。内容进入右 div，所以我希望左面板的高度随着右面板的高度而增长，并且由于它是一个流畅的布局，所以只有左面板的宽度是固定的，所以我无法定义右面板的宽度。

【问题讨论】：

嗨 Imran 如果你愿意，你可以去我的网站，那里有你需要的东西。 net4.ccs.neu.edu/home/dhruven。它在那个页面本身上有你需要的东西。但是只用CSS很难，你愿意用JS吗？

好吧，如果我可以用 CSS 处理这个问题会很好，如果 JS 是必需的，那么我可以使用它，但我对 JS 没有任何命令。您向我建议的网站也是固定布局。我想在流体布局中对齐垂直 div。我不想定义特定的宽度

绝对定位...！重要的固定宽度...哪里是流畅的布局？如果你想保持流畅，我认为你应该找到另一种解决方案。或者，如果您想继续这种方式，请记住 Twitter Bootstrap 与这种样式不兼容。

布局流畅，只有左侧面板（菜单部分）具有固定宽度，右侧面板使用剩余宽度，希望你明白我的意思

【参考方案1】：

@DBUK: 由于没有足够的声望点，我无法在您的帖子中添加评论。 我已经更新了你的小提琴： http://jsfiddle.net/ArbVp/50/

在这种情况下，绝对没有必要以任何方式使用“float”。 还有一些其他的 CSS 值是“可有可无”的……！ ;-)

干杯 冈瑟

【参考方案2】：

在左列上使用绝对位置 - 顶部、底部、左侧和右侧 - 似乎有效：

http://jsfiddle.net/ArbVp/

需要主 div 是相对位置的，并且在列下添加一个 clear。