有div占用剩余父分区高度的1/6

我正在尝试使用css制作简单的日历。有div占用剩余父分区高度的1/6

我有一个父div将包含日历，并且我有一个包含“星期一”，“星期二”等标题，并具有固定高度的div。我现在想要添加表示日历行的div，并将剩余空间拆分为六个偶数行。但是，我无法弄清楚如何将REMAINING空间分成6部分。我尝试的所有东西都会使div div的1/6。

任何提示将不胜感激。

HTML：

<div id="parent> 
    <div id="header"> 
     ST 
    </div> 
    <div class="row"> 
     hi 
    </div> 
</div>

CSS：

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

来源

2016-06-26 quantumbutterfly

我们可以看到你有什么这么远吗？ – LGSon

查看问题。我编辑它包括一些HTML和CSS – quantumbutterfly

当您要分发剩余的由弹性元件留下空间，Flexbox的就是答案。

html, body, #parent { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#header { 
 
    background-color: green; 
 
} 
 
.row { 
 
    width: 100%; 
 
    flex: 1; /* Distribute remaining space equally among the rows */ 
 
    background-color: red; 
 
} 
 
.row:nth-child(odd) { 
 
    background-color: blue; 
 
}

<div id="parent"> 
 
    <div id="header">Header</div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

来源

2016-06-26 21:47:35 Oriol

有几种方法可以做到这一点，挑一个我需要知道更多的应该如何使用。

本样本仅使用CSS calc()并从父母的1/6减去标头的1/6。

html, body { 
 
    margin: 0; 
 
} 
 
#parent { 
 
    height: 100vh; 
 
} 
 
#header { 
 
    height: 60px; 
 
    background-color:green; 
 
} 
 
.row{ 
 
    height: calc(16.66% - 10px); 
 
    background-color:red; 
 
} 
 
.row:nth-child(odd){ 
 
    background-color:blue; 
 
}

<div id="parent"> 
 
    <div id="header"> 
 
     Header 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
</div>

来源

2016-06-26 21:16:10 LGSon

有div占用剩余父分区高度的1/6

回答

相关问题