鍍金池/ 問答/HTML/ 一個關(guān)于css布局的面試題

一個關(guān)于css布局的面試題

今天看面試題，遇到了一個布局方面的題，不太明白題目的意思，請各路大神幫忙看一下：

原題目如下：

如何實現(xiàn)header和footer高度固定，中間content部分高度隨內(nèi)容撐高的布局？
<header style="height:50px"></header>
<content></content>
<footer style='height:100px'></footer>

（請設(shè)置content的style,實現(xiàn)當(dāng)content內(nèi)容不夠時整個content也能撐起整個瀏覽器窗口，僅用css實現(xiàn)）

我不理解的是：題目第一句話要求content高度隨內(nèi)容變化而變化，最后一句要求content撐起整個窗口?是題目錯誤還是我理解錯誤呢？

附上面試題圖片一張
圖片描述

回答
編輯回答
凹凸曼

大概說明白就等于泄題了吧。。。感覺就是要個min-height: calc(100vh - 150px);的事兒，又不讓說“content最小撐滿頁面”，出題人于是破罐子破摔了。。。。

2017年11月12日 18:53
編輯回答
冷咖啡

當(dāng) header 和 footer 都是浮動的時候，就是永遠(yuǎn)處在窗口的最上部和最下部，可以用
content style="position:fixed; top:50px; bottom:50px; left:0; right:0;"

如果要求，當(dāng) content 高度大于窗口高度的時候， footer 默認(rèn)不可見，要產(chǎn)生垂直滾動條，這需要 js 去判斷了 !

2018年2月27日 10:24
編輯回答
夢囈

我覺得可能是個 固定底欄 的需求

2017年4月7日 23:05
編輯回答
神曲

看題目。 是否允許設(shè)置除 content 之外的元素的樣式。

2018年8月19日 22:27
編輯回答
膽怯

這兩句話確實有點矛盾，可能第一句表述的不太準(zhǔn)確吧，看這題目筆誤那么多表義也亂七八糟。
而且一般都是考第二句那個問題的。
要講解答嗎？

2017年7月21日 21:35
編輯回答
祉小皓

這種聽不明白的css布局問題 基本回答flex grid就行了 越模糊越好

2018年9月12日 21:47
編輯回答
懷中人

題目確實描述的不好，意思明確點說應(yīng)該是實現(xiàn)header和footer高度固定，加上中間設(shè)置的content高度，三者高度之和至少大于等于整個瀏覽器窗口高度。

2017年4月14日 10:23