gpt4 book ai didi

html - 如何并排设置两个div

转载 作者:行者123 更新时间:2023-11-27 23:47:54 25 4
gpt4 key购买 nike

我试图在 HTML/CSS 中实现这一点:

+---------------------------------------------------------------------+
| HEADER DIV |
+------------+--------------------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| nav DIV | scrollable DIV |
| | |
| | |
| | |
| | |
| | |
| | |
+---------------------------------------------------------------------+
| FOOTER DIV |
+---------------------------------------------------------------------+
  • 页眉和页脚 div 是浏览器窗口宽度。
  • 页眉和页脚以及以像素为单位的固定高度
  • 页眉和页脚固定在浏览器的顶部和底部window nav div 是浏览器窗口的高度减去(header height +页脚高度)
  • 可滚动内容在内部滚动,不影响页脚或页眉的绝对位置。

我只能达到导航 DIV + 和可滚动 DIV 一起滚动的程度。当可滚动的 DIV 滚动时,我无法让 NAV div 不滚动。

我想关键是我如何将两个 div 并排放置,但在另一个滚动时不滚动其中一个。

最佳答案

<style> 
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; }
.header { height: 10%; width: 100%; }
.wrapper { width: 100%; height: 80%; }
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; }
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; }
.footer { height: 10px; width: 100%; }
</style>

<body>
<div class="container">
<div class="header"></div>
<div class="wrapper">
<div class="nav">
</div>
<div class="scrollable">
</div>
</div>
<div class="footer"></div>
</div>
</body>

关于html - 如何并排设置两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28823442/

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