V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sunhk25
V2EX  ›  前端开发

CSS 上面固定(px),下面可变(%)

  •  
  •   sunhk25 · 2017-12-11 13:40:02 +08:00 · 2190 次点击
    这是一个创建于 2544 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://jsfiddle.net/mktrywLr/205/ 这个例子是左右的固定和可变 参考这个方法想做个上面固定,下面可变的页面 试了下不灵,请指教

    15 条回复    2017-12-12 18:12:19 +08:00
    bzw875
        1
    bzw875  
       2017-12-11 13:54:00 +08:00
    html,body {
    height: 100%;
    }
    #a {
    height: 300px;
    background-color: #fde2e2;
    }
    #b {
    height: 60%;
    background-color: #d1daf3;
    }

    <div id="a">a</div>
    <div id="b"></div>
    所有父元素都有指明高度,否则是父元素 height:auto,自动撑高,子元素无法计算百分比
    sunhk25
        2
    sunhk25  
    OP
       2017-12-11 14:01:39 +08:00
    @bzw875 抱歉说明不足,上面固定后,下面的要充满。也就是下面指定 100%后,通过 margin 来调整高度后,不知能否实现
    bzw875
        3
    bzw875  
       2017-12-11 14:06:10 +08:00   ❤️ 1
    nondanee
        4
    nondanee  
       2017-12-11 16:01:44 +08:00 via Android   ❤️ 1
    你想
    height:calc(??% - ??px);
    还是?
    height:calc(?? * (100% - ??px));
    zenxds
        5
    zenxds  
       2017-12-11 16:02:35 +08:00   ❤️ 1
    不考虑兼容性用 flex 布局是最简单的
    yangheng4922
        6
    yangheng4922  
       2017-12-11 16:07:59 +08:00   ❤️ 1
    dud1ao
        7
    dud1ao  
       2017-12-11 16:32:27 +08:00   ❤️ 1
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    *{margin:0px;padding: 0px;}
    .top{height:300px;background: red;}
    .bottom{position: absolute;top:300px;background: yellow;bottom:0px;width: 100%;}

    </style>
    <body>
    <div class="top"></div>

    <div class="bottom"></div>
    </body>
    </html>
    sunhk25
        8
    sunhk25  
    OP
       2017-12-11 17:36:10 +08:00 via Android
    @zenxds 需要考虑 IE9,flex 不行
    sunhk25
        9
    sunhk25  
    OP
       2017-12-11 17:37:06 +08:00 via Android
    @bzw875 我想利用我的例子来实现
    sunhk25
        10
    sunhk25  
    OP
       2017-12-11 17:41:01 +08:00 via Android
    @yangheng4922 能参考我的例子,改成上下模式模式的吗
    overflowHidden
        11
    overflowHidden  
       2017-12-11 17:49:48 +08:00
    wxsm
        12
    wxsm  
       2017-12-11 19:15:55 +08:00
    一个简单的做法:上面那块用 absolute position,下面那块 100% 高,然后 padding-top 等于上面的高度。
    sunhk25
        13
    sunhk25  
    OP
       2017-12-12 08:16:59 +08:00
    @wxsm 这个做法有点问题就是,下面内容多时,出现滚动条后上面的「向上」按钮就被 top 部分挡住
    dud1ao
        14
    dud1ao  
       2017-12-12 10:05:03 +08:00
    @sunhk25 我 7 楼发的用不了吗?? 上方固定高度 下方 absolute 设置 top 为上方的高度 bottom 为 0px 这样下面的 div 就是自适应的
    sunhk25
        15
    sunhk25  
    OP
       2017-12-12 18:12:19 +08:00 via Android
    Bottom 会超过父元素
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3739 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:35 · PVG 18:35 · LAX 02:35 · JFK 05:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.