我有以下安排：我父母div與container類width: 100%;也都html和body有width: 100%，到目前爲止，它工作正常。但裏面div與container類，我有兩個div S，一個div與width: 300px，和其他分區與width: calc(100% - 300px)，寬度：如果父div的寬度爲：calc（100％ - 300px），則100％不適用於子div。

父在那裏與mainpage類有width: calc(100% - 300px)，和兒童div帶班page有width: 100%; 但width: 100%不適用於此div？

即使父母divwidth是決定性因素。

代碼：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>

來源

2017-07-28 Rahul

提供的代碼正在工作。您還沒有指定一個高度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>

來源

2017-07-28 10:22:44 SchoolBoy

但隨着類 '頁面' DIV已經寬度：100％，身高：100％;？ – Rahul

在你的代碼中，兩次都是'width：100％'和'width：100％'。 – SchoolBoy

沒問題，非常歡迎。請標記爲已接受:) – SchoolBoy

貌似沒有你的代碼，你多大問題在.page課上做了兩次width的拼寫錯誤。改變他們其中之一到height爲我工作得很好，也應該爲你工作。
讓我知道你是否面臨任何問題。

來源

2017-07-28 10:32:01 Priyanjit

這是一個問題！如果我在課程頁面上添加了一些東西，那麼它就會被移除！問題是什麼。？例如將

文本

添加到頁面。 – Rahul

代碼：https://jsfiddle.net/5sx0sj2q/ – Rahul

上面提供的代碼正在工作，只需在頁面類中添加一些高度即可。

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

通過默認高度爲0，如果沒有內容。下面是演示，檢查出來：

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

來源

2017-07-28 10:35:28

這是一個問題！如果我在課程頁面上添加了一些東西，那麼它就會被移除！問題是什麼。？例如將

文本

添加到頁面 – Rahul

代碼：https：//jsfiddle.net/5sx0sj2q/ – Rahul

寬度：如果父div的寬度爲：calc（100％ - 300px），則100％不適用於子div。

回答

文本

文本

相關問題