如何用CSS和HTML实现侧边栏与内容Div并排显示？

问题根源 #

1. CSS语法错误：#brief-info选择器后多了一个多余的闭合大括号}，导致后续侧边栏的CSS规则无法正常解析。
2. 布局匹配失效：侧边栏.sidenav设置了width: 25%，但内容区.content的margin-left: 200px是固定值，当屏幕宽度超过800px时，25%的宽度会大于200px，导致内容区被侧边栏遮挡。
3. 重复偏移设置：#brief-info额外添加的padding-left:250px，和.content的margin-left重复，造成内容偏移混乱。
4. 无效CSS属性：padding不支持负数，header的padding: -500px和.sidenav的padding-top: -100px都是无效属性，会干扰正常布局。

修复后的代码 #

CSS代码

body{
  background-color: #404035;
  margin: 0; /* 清除默认边距，避免布局偏移 */
}

header{
  height: 50px;
  line-height: 50px; /* 用line-height实现标题垂直居中 */
}

header h1{
  text-align: center;
  color: white;
  margin: 0; /* 清除h1默认边距 */
}

#brief-info {
  display: inline-block; /* 保留原设置，移除多余的padding-left */
}

/*SIDE NAVIGATION STYLES*/
.sidenav{
  margin: 0;
  padding: 0; /* 合并padding简化写法 */
  width: 25%;
  background-color: #404035;
  position: fixed;
  height: calc(100% - 50px); /* 减去header高度，避免被顶部标题遮挡 */
  top: 50px; /* 定位到header下方 */
  overflow: auto; /* 侧边栏内容过长时显示滚动条 */
}

.sidenav a{
  display: block;
  color: white;
  padding: 16px;
  text-decoration: none;
}

.sidenav a:hover:not(.active){
  background-color: #555;
  color: white;
}

div.content{
  margin-left: 25%; /* 和侧边栏宽度匹配，确保不被遮挡 */
  padding: 1px 16px;
  min-height: calc(100vh - 50px); /* 确保内容区高度足够 */
  box-sizing: border-box;
}

/*On screens that are from 400px to 700px*/
@media screen and (max-width: 700px){
  .sidenav{
    width: 100px;
    height: auto;
    position: relative;
    top: 0;
  }
  .sidenav a{float: left;}
  div.content{margin-left: 0;}
}

/*On screens that are under 400px*/
@media screen and (max-width: 400px){
  .sidenav a{
    text-align: right;
    float: none;
  }
}

HTML代码（保持原结构即可）

<body>
    <main>
        <header>
            <h1>ANDRES PACHANO</h1>
        </header>
        <div class="sidenav">
            <a href="index.html" id="home">Home</a>
            <a href="">About Me</a>
            <a href="">Contact Info</a>
            <a href="https://github.com/PaxanoA" target="_blank" id="github">Github</a>
            <a href="">Resume</a>
            <a href="">Support Me</a>
        </div>
        <div class="content">
            <p id="brief-info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
            </p>
        </div>
    </main>
</body>
</html>

灵活布局优化建议 #

如果想要更适配多场景的布局，可以改用Flexbox替代固定定位：
给<main>添加Flex属性，调整侧边栏定位：

main {
  display: flex;
  flex-wrap: wrap;
}

.sidenav{
  position: static; /* 移除固定定位 */
  height: auto;
  min-height: calc(100vh - 50px);
}

div.content{
  margin-left: 0;
  flex: 1; /* 自动填充剩余空间 */
}

内容的提问来源于stack exchange，提问作者user18887950