2017-10-28 51 views
-2

内的div需要调整大小有关到外。但结果,外层div的边框比内部件总高度。此外滚动中段预计调整100%自动有关left, right, top and bottom。但他们正在调整与外部股利有关的调整。这里有什么问题?你认为这个实现有更好的解决方案吗?CSS动态事业部尺寸的解决方案

 body { 
 
      background-color: green; 
 
     } 
 

 
     .window { 
 
      width: 550px; 
 
      height: 400px; 
 
      background-color: yellow; 
 
      position: relative; 
 
      border: 2px solid white; 
 
     } 
 

 
     .titlebar { 
 
      top: 0; 
 
      background-color: black; 
 
      height: 20px; 
 
      width: 100%; 
 
      display: flex; 
 
      align-items: center; 
 
     } 
 

 
     .title { 
 
      color: white; 
 
     } 
 

 
     .scroll_right { 
 
      float: right; 
 
      width: 20px; 
 
      height: 100%; 
 
      background-color: blue; 
 
     } 
 

 
     .window_inner { 
 
      background-color: red; 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 

 
     .scroll_bottom { 
 
      background-color: black; 
 
      bottom: 0; 
 
      height: 20px; 
 
      width: 100%; 
 
     } 
 

 
     .rtop { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: blue; 
 
     } 
 

 
     .rmid { 
 
      height: 100%; 
 
      width: 20px; 
 
      background-color: yellowgreen; 
 
     } 
 

 
     .rbot { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: blue; 
 
     } 
 

 
     .bleft { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: pink; 
 
      float: left; 
 
     } 
 

 
     .bmid { 
 
      height: 20px; 
 
      width: 100%; 
 
      background-color: yellowgreen; 
 
      float: left; 
 
     } 
 

 
     .bright { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: pink; 
 
      float: left; 
 
     }
<div class="window"> 
 
     <div class="titlebar"> 
 
      <div class="title">Text</div> 
 
     </div> 
 
     <div class="scroll_right"> 
 
      <div class="rtop"></div> 
 
      <div class="rmid"> </div> 
 
      <div class="rbot"></div> 
 
     </div> 
 
     <div class="window_inner"></div> 
 
     <div class="scroll_bottom"> 
 
      <div class="bleft"></div> 
 
      <div class="bmid"> </div> 
 
      <div class="bright"></div> 
 
     </div> 
 
    </div>

+1

这是一个有点难以猜测有什么预期的结果... –

+1

在你第一次尝试https://stackoverflow.com/q/46989165/1427878你至少中途作出了努力解释你想要什么的...... – CBroe

+1

我想你应该坚持一个问题,在同一时间,并试图了解CSS的位置和大小是如何工作的。你在代码中犯了非常基本的错误。你已经将父母高度设置为400px,然后你添加内部div,两个高度为20px,一个高度为100%。这个总数将会达到100%+ 40px,因此你的内部块的高度比你的父母高。 –

回答

0

虽然,我不能完全理解你的问题,但如果我是正确的,你需要用CSS3 calc()规则一些逻辑在中间的div。请检查我的下面的代码以供参考。

body { 
 
      background-color: green; 
 
     } 
 

 
     .window { 
 
      width: 550px; 
 
      height: 400px; 
 
      background-color: yellow; 
 
      position: relative; 
 
      border: 2px solid white; 
 
     } 
 

 
     .titlebar { 
 
      top: 0; 
 
      background-color: black; 
 
      height: 20px; 
 
      width: 100%; 
 
      display: flex; 
 
      align-items: center; 
 
     } 
 

 
     .title { 
 
      color: white; 
 
     } 
 

 
     .scroll_right { 
 
      float: right; 
 
      width: 20px; 
 
      height: calc(100% - 40px); 
 
      background-color: blue; 
 
     } 
 

 
     .window_inner { 
 
      background-color: red; 
 
      width: calc(100% - 20px); 
 
      height: calc(100% - 40px); 
 
     } 
 

 
     .scroll_bottom { 
 
      background-color: black; 
 
      bottom: 0; 
 
      height: 20px; 
 
      width: 100%; 
 
     } 
 

 
     .rtop { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: blue; 
 
     } 
 

 
     .rmid { 
 
      height: calc(100% - 40px); 
 
      width: 20px; 
 
      background-color: yellowgreen; 
 
     } 
 

 
     .rbot { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: blue; 
 
     } 
 

 
     .bleft { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: pink; 
 
      float: left; 
 
     } 
 

 
     .bmid { 
 
      height: 20px; 
 
      width: calc(100% - 40px); 
 
      background-color: yellowgreen; 
 
      float: left; 
 
     } 
 

 
     .bright { 
 
      width: 20px; 
 
      height: 20px; 
 
      background-color: pink; 
 
      float: left; 
 
     }
<div class="window"> 
 
     <div class="titlebar"> 
 
      <div class="title">Text</div> 
 
     </div> 
 
     <div class="scroll_right"> 
 
      <div class="rtop"></div> 
 
      <div class="rmid"> </div> 
 
      <div class="rbot"></div> 
 
     </div> 
 
     <div class="window_inner"></div> 
 
     <div class="scroll_bottom"> 
 
      <div class="bleft"></div> 
 
      <div class="bmid"> </div> 
 
      <div class="bright"></div> 
 
     </div> 
 
    </div>

希望这有助于

+0

绝对如果它有帮助。 –

+0

不,我不会得到-2分,甚至你不应该为负面投票感到不好。它只是帮助我们提高自己。我想你应该检查一下。 https://stackoverflow.com/tour –

+0

w3schools.com而对于一些提前tweeks ENVATO TutsPlus –