Question

我有以下安排：我的父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的子级width: 100%为width: 100%; 但是div无效div？

即使父width .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; }是决定因素。

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

＆＃13;

<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>

＆＃13;

linear-gradient

＆＃13;

Answer 1

提供的代码正在运行。您尚未指定page的高度，因此高度为0.给它一个高度会使其变为可见：https://jsfiddle.net/kvjw9vhm/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

以上提供的代码正常工作，只需在页面类中添加一些高度。

.page{
width: 100%;
height:100px;
background-color: green;
}

默认高度为0，如果没有内容 .Below是演示，请查看：

.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:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}

<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>

Answer 3

看起来您的代码没有太大问题，并且您在width课程中提到.page两次就输了一个错字。将其中一个更改为height对我来说很好，也适合你如果您遇到任何问题，请告诉我。

如果父div具有宽度：calc（100％ - 300px），宽度：100％不适用于子div

3 个答案: