gpt4 book ai didi

css如何防止内容在固定位置区域下方漂移?

转载 作者:行者123 更新时间:2023-11-28 18:23:04 24 4
gpt4 key购买 nike

我创建了一个 HTML 模板,其中我将侧边栏设置为 position: fixed; 但是当我将浏览器最小化到小于页面设置的宽度时,主要内容会漂移到用户查看侧边滚动时的侧边栏。

是否有任何修复方法可以将带有侧边栏的整个容器和主要内容设置为像一个固定 block 一样?

http://jsfiddle.net/vuj6t/2/

<body>
<div id="container">

<section id="sidebar">
<nav>
<ul>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</nav>
</section>

<section id="stream">

<article>
</article>

<article>
</article>

<article>
</article>

</section>

</div>
</body>


body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
position: relative;
}

#container {
margin: 0 auto;
padding: 0;
position: relative;
width: 700px;
}

#sidebar {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 200px;
}

#stream {
float: right;
margin: 0 0 0 210px;
padding: 0;
width: 490px;
}

最佳答案

您可以完全使用简单的媒体查询将侧边栏放置在窄屏幕上

@media (max-width: 690px) {
#sidebar { position:absolute; }
}

http://jsfiddle.net/vuj6t/3/

关于css如何防止内容在固定位置区域下方漂移?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16377847/

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