在 html 和 css 中添加一条从 header 边界线到底部的垂直线

Question

给定的 css 代码在 html 页面中为我的 header 提供了底部边框线。我想添加一条类似的垂直线，它从 header 中的边框线开始，一直到页面底部，这样我就可以从左侧获得侧边栏面板。请帮助我。

header {
  border-bottom: #bfa161 solid 3px;
  height: 60px;
  background-color: #fff;
  position: relative;
  z-index: 9999;
}

Answer 1

就这么简单，你只需要给div一个边框颜色。您可以调整 div 的大小以满足要求。

header {
  border-bottom: #bfa161 solid 3px;
  height: 60px;
  background-color: #fff;
  position: relative;
  z-index: 9999;
}

footer {
  border-top: #bfa161 solid 3px;
  background-color: #fff;
}

#mainContent {
  display: inline-flex;
}

#vertical_line {
  border-left: 3px solid #bfa161;
  width: 60px;
}

<header>
  MY HEADER
</header>
<body>
  <div id="mainContent">
    <div>
      <p>THIS IS SIDEBAR</p>
    </div>
    <div id="vertical_line">
      <p>THIS IS MY CONTENT</p>
    </div>
  </div>
</body>
<footer>
  MY FOOTER
</footer>

Answer 2

是的，按照哈什说的去做。您应该使用 "div" 标签将您的站点组织成包装器和 "sub" 包装器。 W3Schools 有一些关于它的非常好的书面文档。我强烈建议你阅读它。不是很长。就google吧。

这里有一个 link 解释基本概念，如果你不熟悉的话。 What is the correct way to do a CSS Wrapper?

您应该将 div 作为正文标签内的第一件事，以及结束标签之前的最后一件事。为该标签分配一个 ID。大多数人称之为包装器。这是 HTML 的样子。

<body>
    <div id=wrapper>
 #content for your page
    </div>
</body>

然后当您执行 CSS 时，添加类似这样的内容。注意定义一个 "max-width" 是个好主意。当您习惯于在 CSS.

中做更复杂的事情时，您实际上可以为不同的分辨率范围自定义不同的宽度

#wrappper{
    max-width: 900px;
    max-height: 1750px;
    border: #bfa161 solid 3px;
    margin: 0 auto;     <---"This is so the wrapper centers itself on your screen"
}

现在，如果您想要一个不干扰任何页面内容的左侧导航菜单，您可以在包装器 div 中再制作两个 div 标签。给一个像 navigationdiv 和另一个 contentdiv 这样的 id。向右浮动内容 div，向左浮动导航 div。显然，您应该将导航放在 navigationdiv 中，将其他所有内容放在 contentdiv 中。确保将两个 div 标记都设为内联块。定义宽度也无妨。

navigationdiv{
     display: inline-block;
     width: 200px;
     border-right: #bfa161 solid 3px;    <---"This will make the line you wanted"
     float: left;
}

contentdiv{
     display: inline-block;
     max-width: 700px;
     float: right;
}

我希望这是清楚和彻底的。

在 html 和 css 中添加一条从 header 边界线到底部的垂直线

Adding a vertical line from the header border line to bottom in html and css

html

css

header

sidebar