javascript - 宽度 : 100% is not working on children div if parent div has width: calc(100% - 300px)?

我有以下安排: 我有父 div 类 container 和 width: 100%; 还有 html 和 body 有 width: 100%，到目前为止它按预期工作。但是在 div 类 container 里面，我有两个 div，一个 div 和 width: 300px , 和其他具有 width: calc(100% - 300px),

的 div

mainpage 类的父类有 width: calc(100% - 300px)，子类 div 有 page 有 宽度:100%；但是 width: 100% 在这个 div 上不起作用？

即使父 div width 是行列式。

代码:https://jsfiddle.net/tj8k0nnw/1/

.container {
  width: 100%;
  background-color: #d5d5d5;
}

.sidebarcontainer {
  width: 300PX;
  height: 2000px;
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}

.innersidebarcontainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 293px;
  background-color: white;
  height: 700px;
  top: 1px;
  position: absolute;
}

.mainpage {
  width: calc(100% - 300px);
  padding: 5px;
  padding-right: 2px;
  height: 3000px;
  display: inline-block;
  box-sizing: border-box;
  background-color: teal;
}

.page {
  width: 100%;
  width: 100%;
  background-color: white;
}

.footer {
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: purple
}

.test1 {
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
}

.test2 {
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
}

<div class="container">
  <div class="sidebarcontainer">
    <div class="innersidebarcontainer">
      <div class="sidebar">
        <div class="test1"></div>
        <div class="test2"></div>
      </div>
    </div>
  </div>
  <!--
    -->
  <div class="mainpage">
    <div class="page"></div>
  </div>
</div>
<div class="footer"></div>

最佳答案

提供的代码有效。您尚未为 page 指定高度，因此高度为 0。为其指定高度会使其可见:https://jsfiddle.net/kvjw9vhm/

.container{
  width: 100%;
  background-color: #d5d5d5;
}
.sidebarcontainer{
  width: 300PX;
  height: 2000px;
  display: inline-block;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 2px;
}
.innersidebarcontainer{
  position: relative;
      width: 100%;
    height: 100%;
}
.sidebar{
  width: 293px;
  background-color: white;
  height: 700px;
  top: 1px;
  position: absolute;
}
.mainpage{
  width: calc(100% - 300px);
  padding: 5px;
  padding-right: 2px;
  height: 3000px;
  display: inline-block;
  box-sizing: border-box;
  background-color: teal;
}
.page{
  width: 100%;
  height: 100%; /* was width: 100%; */
  background-color: white;
}
.footer{
  height: 500px;
  width: 100%;
  margin: 0 auto;
  background-color: purple
}
.test1{
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
}
.test2{
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
}

<body>
  <div class="container">
    <div class="sidebarcontainer">
      <div class="innersidebarcontainer">
        <div class="sidebar">
          <div class="test1"></div>
          <div class="test2"></div>
        </div>
      </div>
    </div>
    <div class="mainpage">
      <div class="page"></div>
    </div>
  </div>
  <div class="footer"></div>
</body>

关于javascript - 宽度 : 100% is not working on children div if parent div has width: calc(100% - 300px)?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45370880/

javascript - 宽度 : 100% is not working on children div if parent div has width: calc(100% - 300px)?

上一篇：html - 如何通过编辑html代码防止文件被盗？

下一篇：css - 使用 flexbox 之间的空间