两列宽高自适应

约定不等于承诺〃 2023-10-11 12:26 136阅读 0赞

两列布局，要求占满整个页面，其中某列固定，另一列宽度自适应，另外要求两列的高度都要根据屏幕自适应，占满整屏。

宽度好整，一列设宽，一列不设宽，只设margin-left或margin-right即可，然后固定宽度的那列position:absolute. 但高度比较麻烦，经测试发现，文档流中的元素设置height:100%无效，即不能拉伸高度以适应屏幕。原因尚且不明，不过先记下，昨天刚刚收到了新买的《CSS权威指南》，希望看完后能有个明确的答案，界时会再来更新。

=============

目前找到的一个解决方案，是将两列都设为position:absolute, 然后分别通过left和right控制它们的宽，通过top和bottom控制它们的高。这里再啰嗦一句：在未显示设置width和height时，对于position:absolute的元素，其right和left的差值就是它的宽，其bottom和top的差值就是它的高。如果同时还设置了width和height，则width和height的优先级大。

最后附上代码(右侧栏固定宽度的效果)：

body {backgournd-color: #CCC;}

.main {position: absolute; left: 0; right: 350px; top: 0; bottom: 0; background-color: pink;}

.sidebar {position: absolute; right: 0; top: 0; bottom: 0; width: 350px; background-color: skyblue;}

上面代码中left, right, bottom, top的设置是关键，其中top: 0; bottom: 0; 两句可以替换为height: 100%;

发表评论

表情：
评论列表 （有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

    相关 两列宽高自适应

    两列布局，要求占满整个页面，其中某列固定，另一列宽度自适应，另外要求两列的高度都要根据屏幕自适应，占满整屏。 宽度好整，一列设宽，一列不设宽，只设margin-left或ma

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 137 阅读

    相关 CSS宽高自适应设置

    宽高自适应 > 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。 > 自适应的优点： > 元素自适应

    以你之姓@以你之姓@/ 0 赞/ 84 阅读

    相关 div 自适应宽或高

    对于一个写后台的开发人，调试页面样式真的是很难受。 需求：上下布局，上面固定高度，下面s自适应高度。 思路：俩个div相当父容器都是绝对位置，下面div的top是上面div

    缺乏、安全感缺乏、安全感/ 0 赞/ 315 阅读