浏览器调整大小时的不同 div 大小答案

【问题标题】：different div sizes on browser resize浏览器调整大小时的不同 div 大小
【发布时间】：2016-10-09 05:17:04
【问题描述】：

我有 2 个并排的 div，它们构成了我的响应式设计的一部分

我将每个 div 设置为 179 的高度，因为其中一个 div 下方有一个间隙，建议给它们设置高度。

当 div 堆栈空间不足时，页面内容会比 id 更向下推。

有没有办法让 div 在有空间时保持彼此相同的大小，但当浏览器调整大小并且没有足够空间时，正确的最终只有一定高度，比如 20px 而不是 179px两个 div 和它们堆叠？

我希望除了使用媒体查询之外还有其他答案

</div>
<div class="right-column1">

</div>
</div>


.container1 {
width: 100%;

}
.left-column1 {
width: 50%;
float:left;
height:179px;
}
.right-column1 {
width:50%;
float:left;
height:179px;
}`

【问题讨论】：

您的问题有点混乱，能否给我们您的问题的链接？您可以使用 jsfiddle 或其他免费主机，谢谢！
当浏览器变得太小以容纳左右 div 并且它们堆叠时，我基本上只是希望右侧 div 从 179 到 20px 高度
因为右边的 div 只包含一个搜索框，当它们堆叠在较小的屏幕或浏览器尺寸上时会占用很多屏幕空间，但在全尺寸浏览器和屏幕上它们都是 179px，因为如果它们有 2 个不同的高度。

标签： css html layout responsive-design

【解决方案1】：

我不确定单独使用 CSS 是否可行。

我已经在这个FIDDLE 中完成了它 - 我不确定它是否适合你。

var $startwindowwidth = $( window ).width();

$( window ).resize(function() {
  if ( $( window ).width() < ( $startwindowwidth * 0.5 ) )
  {
      $( '.right-column1').css({
          'float'  : 'none',
          'height' : '20px'
                                });
      $( '.left-column1').css({
          'float'  : 'none'
                                });
  } else {
      $( '.right-column1').css({
          'float'  : 'left',
          'height' : '179px'
                                });
      $( '.left-column1').css({
          'float'  : 'left'
                                });
   }
});

试试这个http://jsfiddle.net/YAFdz/2/。

不要给它一个高度，你可以把它放在一个 div 中。

但请记住，当您开始将“固定”宽度信息放入 div 时，它不会是“流动的”。

【讨论】：

如果我将搜索框垂直居中，我可以将容器的背景颜色设置为相同，并且只有搜索框大小的正确 div 吗？我试过了，但是当左右 div 堆叠时，搜索框消失了
我不确定我是否理解 - 您是否在窗口更改大小之前更改初始布局？
好吧，正确的 div 将始终设置为搜索框的大小。说 20px 高，并在容器中垂直居中。因此，由于容器的背景颜色，它看起来与左侧 div 的大小相同。所以当浏览器上的左右栈收缩时，右边的 div 只会占用 20px 而不是 179 并且页面内容不会隐藏在 2 197px div 以下。
好的，我看到了它的 js。那会跨浏览器/设备兼容吗？
我忘了提到我有媒体查询来控制我的响应式布局。你认为它会和他们一起工作吗？

【解决方案2】：

当屏幕变小时，您可以使用媒体查询来更改右列的样式。例如，如果您希望两个 div 的大小相同，直到视口小于 200 像素（此时右列将获得 40 像素的高度），您可以使用以下内容：

#left , #right{
  width: 50%;
  height: 200px;
  text-align: center;
}


#left{
  float: left;
  background-color: blue;
}


#right{
  float: right;
  background-color: orange;
}

@media (max-width: 200px){
#left{
  width: 100%;
}


#right{
  width: 100%;
  height: 40px;
}
  
}

<html>
   <body>
       <div id="left"><p>Left</p></div>
       <div id="right"><p>Right</p></div>
   </body>
</html>

【讨论】：