问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个关于css布局的面试题

头像
陈年华
    251812

    今天看面试题，遇到了一个布局方面的题，不太明白题目的意思，请各路大神帮忙看一下：

    原题目如下：

    如何实现header和footer高度固定，中间content部分高度随内容撑高的布局？
    <header style="height:50px"></header>
    <content></content>
    <footer style='height:100px'></footer>

    （请设置content的style,实现当content内容不够时整个content也能撑起整个浏览器窗口，仅用css实现）

    我不理解的是：题目第一句话要求content高度随内容变化而变化，最后一句要求content撑起整个窗口?是题目错误还是我理解错误呢？

    附上面试题图片一张
    图片描述

    css
    阅读 3.5k
    8 个回答
    得票最新
    头像
    某熊猫桑
      16.1k61547

      大概说明白就等于泄题了吧。。。感觉就是要个min-height: calc(100vh - 150px);的事儿，又不让说“content最小撑满页面”，出题人于是破罐子破摔了。。。。

      头像
      SevenOutman
        3.2k31225

        这两句话确实有点矛盾，可能第一句表述的不太准确吧，看这题目笔误那么多表义也乱七八糟。
        而且一般都是考第二句那个问题的。
        要讲解答吗？

        头像
        yeungx
          8753723

          看题目。 是否允许设置除 content 之外的元素的样式。

          头像
          jsdt
            4.9k2319

            题目确实描述的不好，意思明确点说应该是实现header和footer高度固定，加上中间设置的content高度，三者高度之和至少大于等于整个浏览器窗口高度。

            头像
            fish
              4k74979

              我觉得可能是个 固定底栏 的需求

              头像
              末子
                7532740

                当 header 和 footer 都是浮动的时候，就是永远处在窗口的最上部和最下部，可以用
                content style="position:fixed; top:50px; bottom:50px; left:0; right:0;"

                如果要求，当 content 高度大于窗口高度的时候， footer 默认不可见，要产生垂直滚动条，这需要 js 去判断了 !

                头像
                zzgzzg00
                  3.7k21420

                  这种听不明白的css布局问题 基本回答flex grid就行了 越模糊越好

                  头像
                  heath_learning
                    1.4k32133

                    我觉得题目想实现的是"Sticky Footer"布局，我这有一个实现方案你可以参考下。

                    <style>
    body{
        margin: 0;
        padding: 0;
    }
    div{
        box-sizing: border-box;
    }
    html,body{
        height: 100%;
    }
    .container{
        position: relative;
        height: 100%;
    }
    .header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #f60;
    }
    .main{
        padding-top: 50px;
        min-height: 100%;
        padding-bottom: 50px;
        margin-bottom: -50px;
    }
    .footer{
        height: 50px;
        background-color: #f00;
    }

</style>

<body>
    <div class="container">
        <div class="header">header</div>
        <div class="main">
            <h1>我是中间内容</h1><h1>我是中间内容</h1><h1>我是中间内容</h1><h1>我是中间内容</h1>
            <h1>我是中间内容</h1><h1>我是中间内容</h1><h1>我是中间内容</h1><h1>我是中间内容</h1>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

                    .main内容不足以撑起整个页面时的效果
                    图片描述

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题