我希望我的侧边栏位于主块和标题的左侧,这样当窗口的大小发生变化时,所有块都会一起移动,但是,每当我将其位置从固定更改为相对/粘性时,它就会下降到页面底部。或者,侧边栏可以保持固定,但我需要找到一种方法来阻止其他块在窗口大小发生变化时进入其下方。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel ="stylesheet" href="css/main.css">
<title>Homepage</title></head>
<body>
<div class="header"><div class="element" style="display: flex;"><div class="container">
<button class="button" >1</button>
<button class="button" >2</button>
<button class="button" >3</button>
</div></div></div>
<div class="main"><div class="element">
<h1>TestText</h1>
<p>TestText</p>
<h1>TestText!</h1>
</div></div>
<div class="sidebar"><div class="element"><div class="container">
<p>TestText</p>
<a href="about.html" target="_blank" title="click here~" >
<button class="button">!</button>
</a>
<p><button class="button">!!</button></p>
<p><button class="button">!!!</button></p>
</div></div></div>
</body>
</html>
CSS
body {background-color: #1c1f2b;
margin: 0;
padding: 0;
min-height: 100vh;
font-family: Humaroid;
srs:url(/fonts/Humaroid.otf) format("opentype");
font-size: 1.25rem;
word-break: break-all;}
.container{margin-left: auto;
margin-right: auto;
position: center;}
.sidebar {
color: #FED2C7;
text-shadow:
-1px -1px 0 #704935,
1px -1px 0 #704935,
-1px 1px 0 #704935,
1px 1px 0 #704935;
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 20px;
background-color: #faf4e6;
margin-right: 20px;
}
.header {background-color: #faf4e6;
height: 90px;
width: 940px;
position: relative;
margin: 0 auto;
padding-bottom: 10px
}
.main{ width: 940px;
height: 80vh;
margin: 0 auto;
padding: 30 px;
background-color: #faf4e6;}
.element{
font-weight: 400;
text-align: left;
margin: 1em;}
我看到有人提到这个问题可能是由于 div 块保持打开状态引起的,但对我来说似乎并非如此。我还尝试向侧边栏添加底部边距,但这没有任何作用。
不要尝试编写自定义 CSS,而是尝试参考已知的做法(谷歌页面网格布局)。例如,其中之一是:https://www.w3schools.com/css/css_grid.asp。
然而,他们的风格与你的不匹配,但你可以尝试这个 html/css:
您可以使用 Flexbox 实现类似的效果(同样,您可以通过 google 搜索 Flex 页面布局)。另外我建议您使用 css 框架,例如 Bootstrap 或 Tailwind。
试试这个代码。如果效果不好,请告诉我。
这就是您使用代码所得到的:
据我了解,这是一个解决方案
我修改了 HTML 和 CSS 以使用 Flexbox 进行布局,并确保侧边栏保持位于主块和标题的左侧,即使窗口大小发生变化也是如此。此外,我调整了一些样式以获得更好的对齐和响应能力,请记住,视图在不同的屏幕尺寸下看起来是相同的,我希望它有所帮助。