不用flex的情况下 css 一个容器内 一个高度固定 一个高度自适应
时间: 2024-03-19 20:43:50 浏览: 109
css实现一个容器的水平垂直居中-兼容所有的浏览器
使用绝对定位和 padding 可以实现一个容器内一个高度固定一个高度自适应的布局。
HTML 代码示例如下:
```html
<div class="container">
<div class="fixed-height"></div>
<div class="auto-height"></div>
</div>
```
CSS 样式示例如下:
```css
.container {
position: relative;
}
.fixed-height {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100%;
box-sizing: border-box; /* 包含 padding */
}
.auto-height {
position: absolute;
top: 100px; /* 留出固定高度 */
left: 0;
width: 100%;
box-sizing: border-box; /* 包含 padding */
padding-top: 20px; /* 留出内边距 */
}
```
通过将固定高度的元素设置为绝对定位,并且设置宽度为 100%、高度为固定值,使用 box-sizing 属性来包含内边距,来固定宽度和高度。同时,将自适应高度的元素也设置为绝对定位,并且设置 top 属性为固定高度的值,留出固定高度的位置,设置 padding-top 属性来留出内边距,从而让自适应高度的元素自适应容器的高度。需要注意的是,这种方法会使元素脱离文档流,可能会对布局产生影响。
阅读全文