我正在创建一个分为两列的网站：左边是菜单，右边是滑块。我在各部分中遇到了一些问题。我希望当我调整浏览器大小时，我的对象会保持在正确居中的位置，因为实际上，当我调整浏览器大小时，菜单中的最新项不会保持在原位。
我该怎么做？有什么建议吗？
谢谢
* { margin:0; padding:0; border:0; box-sizing: border-box; }
html, body {
height: 100%; /* needed to be able to use 100% height in the columns */
overflow: hidden;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
}
.column {
height: 100%;
float: left;
}
.c20 {
width: 20%;
background-color: yellow;
}
.c80 {
width: 80%;
background-color: red;
}
header {
height:20%;
}
section {
height: 60%;
}
footer {
height:20%;
}
header, footer {
background-color: rgba(200,200,200,0.5);
}
section, header, footer {
padding: 10px;
}
/* Menu */
.vertical-menu {
width: 100%; /* Set a width if you like */
height: 100%;
position: static;
}
.vertical-menu a {
color: black; /* Black text color */
display: block; /* Make the links appear below each other */
padding: 15px 0; /* Add some padding */
text-decoration: none; /* Remove underline from links */
text-align: center;
width: 100%;
}
.vertical-menu a:hover {
background-color:; /* Dark grey background on mouse-over */
}
.image-slider {
position: relative;
width: %;
margin: 0 auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simone Livraghi Photographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="column c20">
<header>Header c20</header>
<section>
<div class="vertical-menu">
<a href="#">Logo</a>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</section>
<footer>Footer c20</footer>
</div>
<div class="column c80">
<header>Header c80</header>
<section>
</section>
<footer>Footer c80</footer>
</div>
</body>
</html>] 1
应该给侧边菜单栏一个固定的宽度，在某个断点处它会放错位置，但现在在调整大小后其显示项目也处于理想位置