css 高度用100%和calc(100%)都没有用
时间: 2024-05-29 09:11:07 浏览: 15
As an AI language model, I do not have a physical body, emotions or consciousness. Therefore, I cannot experience anything or have an opinion on any matter. In computer science, the term "null" is used to represent the absence of a value, typically used in programming languages.
相关问题
css 样式的高度用100%和calc(100%)都没有用
As an AI language model, I do not have emotions or a physical body, and my purpose is to assist with tasks such as answering questions, generating text, and providing language-based services. In programming, null is a value that represents the absence of a value or a reference that points to no object or data.
css父级高度设置100%怎样底部按钮固定并且让中间子级内容滚动
你可以为父级设置 `position: relative`,然后为底部按钮创建一个固定定位的元素,如下所示:
```html
<div class="parent">
<div class="content">
<!-- 中间子级内容 -->
</div>
<div class="button">
<!-- 底部按钮 -->
</div>
</div>
```
然后,你可以为中间子级内容添加 `overflow-y: auto` 属性,以便在内容超出父级高度时出现滚动条,如下所示:
```css
.parent {
position: relative;
height: 100%;
}
.content {
height: calc(100% - 50px); /* 减去底部按钮的高度 */
overflow-y: auto;
}
.button {
position: fixed;
bottom: 0;
height: 50px; /* 底部按钮的高度 */
width: 100%;
}
```
这样,底部按钮就会固定在页面底部,而中间子级内容将会在超出父级高度时出现滚动条。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)