鍍金池/ 問答/HTML5  HTML/ flex布局 如何讓內(nèi)容不超出頁面的高度

flex布局 如何讓內(nèi)容不超出頁面的高度

用了flex布局，

clipboard.png
這樣的布局，如何讓這3個div，分別沾滿整個頁面，就僅用該頁面的高度，而不出現(xiàn)右側(cè)滾動條的那種，
中間的div是table表格，

clipboard.png

clipboard.png

求問該怎么寫，

回答
編輯回答
陌如玉

容器用

.main {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

然后header和footer用flex定高，中間內(nèi)容的部分直接flex:auto;是不是就行了？

記得overflow: hidden;和另外跑遍兼容。

2017年3月22日 11:19
編輯回答
青裙

看起來是元素塊的padding或margin撐開了
給所有的div 加個box-sizing: border-box;

2017年7月24日 21:21
編輯回答
青瓷

給body或是main設(shè)置一個overflow: hidden;頭部和底部的高度定值，中間的撐開就可以了

2018年5月9日 00:29
編輯回答
拮據(jù)

這是我寫的你可以看一下是不是你想要的效果 https://codepen.io/kimfoc/pen...

2018年8月8日 22:06