gpt4 book ai didi

html - 固定顶部/固定底部+具有固定高度的内部div是正确的方法吗?

转载 作者:行者123 更新时间:2023-11-28 14:14:33 26 4
gpt4 key购买 nike

我正在尝试创建具有固定菜单和页脚面板以及创建浏览器滚动(根据需要)的内部 div 的 stackoverflow 风格的应用程序。

我只是想问一下下面的代码是否可以实现上述场景? fixed-top/fixed-bottom 是来自 Bootstrap4 的样式。我看到我必须在我的方法中的 HTML/样式代码中使用固定常量,可以吗。

<body>
<div>
<div class="fixed-top" style="height: 50px; border: 2px solid black">
Header
</div>
<div>
<div style="height: 50px"></div>
(1) The protection of natural persons in relation to the processing of personal data is a fundamental right. Article 8(1) of the Charter of Fundamental Rights of the European Union (the ‘Charter’) and Article 16(1) of the Treaty on the Functioning of
the European Union (TFEU) provide that everyone has the right to the protection of personal data concerning him or her.
<div style="height: 50px"></div>
</div>
<div class="fixed-bottom" style="height: 50px; border: 2px solid black">
Footer
</div>
</div>
</body>

最佳答案

请使用下面的 css 而不是使用 Bootstrap 类,其中页眉和页脚将具有固定的高度和绝对位置。

    html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
fixed-header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #4C4;
height: 50px;
}
fixed-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #4C4;
height: 30px;
}

<div class="fixed-header">
Header
</div>
<div class="container-fluid body-content">
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<div class="fixed-bottom">
Footer
</div>

关于html - 固定顶部/固定底部+具有固定高度的内部div是正确的方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56060407/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com