响应div扩展到另一个div

Question

我有一个带有容器的页面，其中有一个div，并且还有两个div，并排。随着视图变小，我希望右边的div消失，左边的div占据整个父div。 我一直在实现这个问题。当我在div上尝试绝对位置时，它会扩展到父级的填充宽度，但它也会弹出父级（排序）。当我尝试过其他地方建议的转换时，没有做任何有用的事情。然后我尝试了z-index并将边距更改为 - 但这似乎也没有用。向正确的方向推动会很棒。

    .box {
      background-color: #F28B20;
      border-radius: 5px;
      height: auto;
      margin-bottom: 150px;
      width: 80%;
      display: inline-block;
      box-shadow: 10px 10px 5px #888888;
      background-image: url("../Images/logo_faded_background.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .sidebar {
      float: right;
      width: 29%;
      margin-left: 0;
      margin-right: 3%;
      text-align: left;
      color: #171581;
    }
    .whiteBoxHalf {
      float: left;
      width: 54%;
      background: rgba(255, 255, 255, 0.6);
      border-color: #000000;
      border-width: 1px;
      border-style: solid;
      margin-left: 3%;
      margin-right: 5%;
      margin-bottom: 15px;
      padding: 15px;
    }
@media (max-width: 1019px) {
    .header {
        font-size: small;
    }

.header li a {
    padding: 20px 10px;
}

    .sidebar {
        display: none;
    }

    .whiteBoxHalf {
    width: 95%;
}
}

<div class="box">
  <div class="row">
    <div class="whiteBoxHalf"></div>
    <div class="sidebar"></div>
  </div>
</div>

Answer 1

您可以使用display:table-row和overflow:hidden执行此类操作。的 Fiddle

＆＃13;

＆＃13;

.box, .whiteBoxHalf {
    min-width: 300px;
}
.box {
    background-color: #F28B20;
    border-radius: 5px;
    margin-bottom: 150px;
    width: 80%;
    box-shadow: 10px 10px 5px #888888;
    overflow: hidden;
}
.row {
    display: table-row;
}
.sidebar {
    display: table-cell;
    margin-left: 0;
    margin-right: 3%;
    text-align: left;
    color: #171581;
    background: green;
}
.whiteBoxHalf {
    display: table-cell;
    background: rgba(255, 255, 255, 0.6);
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    margin-left: 3%;
    margin-right: 5%;
    margin-bottom: 15px;
    padding: 15px;
    width: 60%;
    box-sizing: border-box;
}

＆＃13;

<div class="box">
    <div class="row">
        <div class="whiteBoxHalf">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque consequat porta. Praesent a odio lorem. Donec scelerisque mauris nibh, ut finibus ipsum semper eget. Praesent dapibus ante et diam condimentum tempus. Vivamus nisl nisl, finibus in neque non, maximus pretium est. In hac habitasse platea dictumst. Quisque dapibus faucibus nisl. Donec vel tincidunt est, blandit imperdiet eros. Integer blandit finibus vestibulum. Mauris vel ante quis neque congue ullamcorper in vitae quam. Morbi pretium elementum ante, eget suscipit enim elementum sit amet. Integer ornare, risus euismod tincidunt lobortis, arcu ligula lobortis lectus, in egestas est quam sed massa. Etiam porta, neque eget cursus gravida, sem nisl convallis erat, ut pharetra felis ex ac odio. Nunc aliquam enim quis nulla auctor suscipit. Maecenas id enim eu purus hendrerit interdum nec id est.
            </p>
        </div>
        <div class="sidebar">
            <p>
Praesent sem tortor, volutpat at volutpat lobortis, luctus eget tellus. Nulla facilisi. Vestibulum sodales mauris non sapien volutpat hendrerit. Curabitur quis vestibulum nulla. Pellentesque justo risus, vestibulum ac ligula eu, interdum lacinia lorem. Sed ornare libero nunc. Morbi vitae fringilla ipsum. Nulla tempor viverra odio eget ultrices. Etiam fermentum erat viverra ex rhoncus, eget lacinia arcu semper. Aliquam lobortis massa ac tincidunt vestibulum. Nam ex ligula, molestie vel luctus eu, pretium quis lacus. Cras tincidunt nisl nec viverra condimentum.
            </p>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果这不是所需的行为，您可能希望使用媒体查询来定位特定的屏幕分辨率，并相应地显示/隐藏侧边栏。例如：

.sidebar {
    display: none;
}
@media (min-width: 800px) {
    .sidebar {
        display: block;
    }
}