如果隐藏另一个div，则调整div的宽度？答案

【问题标题】：Div's width adjusting if another div is hidden or not?如果隐藏另一个div，则调整div的宽度？
【发布时间】：2014-03-05 15:45:09
【问题描述】：

在我的身体中，我想要两个内容并排的 div，每个 div 的宽度为屏幕的 50%。但是我希望能够隐藏/显示第一个 div，然后第二个 div 的宽度会对此做出响应，将其宽度更改为 100% 或 50%。根据第一个 div 是否隐藏，填充 body 或 body 的其余部分。

任何想法如何做到这一点？（我知道如何用 jquery 显示/隐藏，我在想 HTML）

【问题讨论】：

标签： html

【解决方案1】：

仅对第一个元素使用浮动，并让第二个元素适合剩余空间。

然后，如果元素通过width:50% 可见，则第二个元素将填充另一半。但是如果第一个被隐藏，第二个会填满整个屏幕。

Demo

HTML：

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

CSS：

#wrapper, #right {
    overflow: hidden;
}
#left {
    float: left;
    width: 50%;
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none;
}

JS：

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};

【讨论】：

谢谢！它几乎可以工作了。我认为第二个 div 有问题。我在第二个 div 中有一个地图，如果我从它开始填充整个区域，然后显示第一个 div（宽度为 50%），第二个 div 调整并更改它的宽度，但它似乎只是将地图中心推到右边实际上并没有改变大小..有什么想法吗？
@user3199840 不确定您的意思。如果右边有 100% 的宽度，变成 50%，它的左边会被推到右边。如果它不动，就意味着尺寸没有改变，不是吗？
我已经编辑了我的第一篇文章。也许它与地图设置有关。但是当 map-div 变为 50% 时，地图的中心不会调整到新的 div 宽度，而是被推到可见 div 之外。很难解释。
我认为问题出在地图上。我将开始一个单独的帖子。感谢您的帮助！
@user3199840 一点也不 :) 问题是因为width: 100%; position: fixed; display:inline-block。您必须删除它们才能使其正常工作。

【解决方案2】：

另一种可能性：使用display: table-cell。与浮点数相比，这具有两个列将具有相同高度的优点，并且设置包装器的高度也会为两列设置它。

Demo

HTML：

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

CSS：

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
}
#left {
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none !important;
}

JS：

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};

【讨论】：

【解决方案3】：

您可以使用 flexbox 和 JQuery 来处理任意数量的 div。

https://jsfiddle.net/L8kfty5n/5/

function hideandshow() {
  if ($('.hide').is(":checked"))
    $("#div1").show();
  else
    $("#div1").hide();
}

.container {
  display: flex;
  flex-flow: row nowrap;
}

#div1,
#div2,
#div3 {
  flex-grow: 1;
  flex-basis: calc(100% / 3);
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="container">
  <div id="div1">This disappears</div>
  <div id="div2">This grows</div>
  <div id="div3">This grows too</div>
</div>
<input class="hide" type="checkbox" name="hide" value="1" onchange="hideandshow()" checked/>

【讨论】：