问答博客资讯标签用户活动
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如何让元素满屏

头像
jervain
    10952937
    <body>

<div id="main">
    <div id="ch"></div>
</div>

</body>

    我是想让main的高度等于浏览器的高度，如果ch的高度大于浏览器高度时main的高度也能随之变大，我现在的实现是这样的

    #mian{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

#ch{
width: 50px;
height: 2000px;
}

    我将ch设为2000高，此时发现ch撑开了main，main的高度比ch小，按照我的预期如果ch小于浏览器高度时main的高度为浏览器高度，如果ch的高度大于浏览器高度则main的高度为ch的高度，请问该怎么实现？

    补充一下:
    clipboard.png
    如上图所示，3的高度可能比页面要小，如果小时希望2的高度等于页面高度，3的高度也可能比页面要大，这时就希望2的高度与3保持一致

    前端htmlcss3
    阅读 9.8k
    6 个回答
    得票最新
    头像
    杰克船长
      2699
      ✓ 已被采纳

      如果理解没错的话，你的需要效果可以用实现为：

      #main {
    position: absolute;
    top: 0;
    /* bottom: 0; */
    left: 0;
    right: 0;
    min-height: 100vh; // 或 100%
    background: rebeccapurple;
   }

      '#ch' 不变

      头像
      kumfo
      6.7k33257
      <!doctype html>
<html>
<head>
<style type="text/css">
html,body {padding:0px;margin:0px;width:100%;height:100%;}
#menu {
    position:absolute;
    width:200px;
    height:100%;
    overflow-y: scroll;
}
</style>
</head>
<body>
<div id="menu">
    <div class="item">dfdsfds</div>
</div>
</body>
</html>

      大致是这个思想，你可以测试一下

      头像
      Ash_Shen
        2.8k1414

        可以给main设置一个最小高度min-height:100vh;

        另外 main的样式里面去掉right：0 bottom：0；

        demo

        头像
        April
          4361212
          #mian{
    position: absolute;
    width:100%;
    height:100%;
}//应该是你想要的效果
          头像
          royal_029
            8261212
            头像
            天王
              2
              新手上路，请多包涵

              使用flex布局

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