html - 如何让边框覆盖整个div

Question

我试图在我的页面的容器 container-body 部分周围设置一个边框，但在我调整大小之前它只覆盖了我的页面的顶部。我为此特定目的添加了一个新的 div 并添加了 id“main-box”，但同样的事情正在发生。下面包含代码和屏幕截图。我错过了什么？如果有帮助，我正在使用 bootstrap。

非常感谢伊丽莎

/*!
 * Start Bootstrap - Small Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
  font-family: 'Palatino Linotype', serif;
  font-size: 16px;
}
.header {
  background-color: rgb(42, 94, 142);
  color: white;
  width: 100%;
}
.header h1 {
  padding: 10px;
  padding-bottom: 15px;
}
.first {
  font-size: 90%;
}
.container-body {
  width: 100%;
}
.main-box {
  border: 1px black solid;
}
#no-bullets {
  list-style-type: none;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
#cv {
  color: #b29600;
  background: white;
}
.navbar-default .navbar-nav > .active >a {
  color: #b29600;
  background: transparent;
  ;
}
#title-text {
  padding-bottom: 35px;
}
#main-info {
  background-color: rgba(198, 217, 241, 0.3);
  margin-top: 20px;
  padding: 50px;
}
.title-font {
  font-size: 20px;
  font-weight: bolder;
}
.navbar-fixed-top .navbar-brand {
  padding: 0 15px;
}
.navbar-fixed-bottom {
  background: white;
}
#map {
  padding: 20px;
  width: 100%;
}
#footer-text {
  color: black;
  font-size: 9px;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  font-weight: 100px;
}
.active {
  color: rgb(0, 176, 240);
}
.contact-text {
  color: rgba(0, 176, 240, 1);
  text-decoration: underline;
  font-size: 14px;
  ;
  ;
  line-height: 20px;
  ;
  ;
}
#footer-text a {
  color: black;
  text-decoration: underline;
}
#footer-background {
  background: rgba(217, 217, 217, .3);
}
@media(min-width:768px) {
  body {} .navbar-fixed-top .navbar-brand {
    padding: 15px 0;
  }
}
@media(max-width: 1095px) {
  #motto {
    font-size: 14px;
  }
}
@media(min-width: 1095px && max-width:1500px) {
  #motto {
    font-size: 16px;
  }
  .nav li a {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
  }
  #logo_small {
    display: block;
  }
  #logo {
    display: none;
  }
}
@media(min-width :1500px) {
  #motto {
    font-size: 30px;
  }
}

<!-- Page Content -->
<div class="container container-body">
  <div class="main-box">
    <div class="header">
      <h1 id="title-text"><span class="first">L</span> A W &nbsp;<span class="first"> O </span>F F I C E S &nbsp; O F <br>
        <span class="first">S </span>A R A H &nbsp; <span class="first">D </span>I A N E &nbsp; <span class="first">M </span>C <span class="first">S </span>H E A</h1>
    </div>
    <h3 id="motto">L &nbsp;E &nbsp;G &nbsp;A &nbsp;L &nbsp; &nbsp; E &nbsp;T &nbsp;H &nbsp;I &nbsp;C &nbsp;S &nbsp; &nbsp; &nbsp;A &nbsp;N &nbsp;D &nbsp; &nbsp; &nbsp;P &nbsp;R &nbsp;O &nbsp;F &nbsp;E &nbsp;S &nbsp;S &nbsp;I &nbsp;O &nbsp;N &nbsp;A &nbsp;L &nbsp; &nbsp; &nbsp;R &nbsp;E &nbsp;S &nbsp;P &nbsp;O &nbsp;N &nbsp;S &nbsp;I &nbsp;B &nbsp;I &nbsp;L &nbsp;I &nbsp;T &nbsp;Y</h3>
    <!-- Heading Row -->
    <div class="row">
      <!-- Navbar doesn't collapse -->
      <ul id="no-bullets" class="col-md-3">
        <li class="active">
          <a href="index.html" class="active">HOME</a>
        </li>
        <li>
          <a href="practiceareas.html">PRACTICE AREAS</a>
        </li>
        <li>
          <a href="biography.html">BIOGRAPHY</a>
        </li>
        <li>
          <a href="professional.html">PROFESSIONAL ACTIVITES</a>
        </li>
        <li>
          <a href="professional.html"> PUBLICATIONS</a>
        </li>
        <li>
          <a href="contact.html">CONTACT</a>
        </li>
      </ul>
      <!-- /.col-md-8 -->
      <div id="main-info" class="col-md-8">
        <h4><strong>Sarah Diane McShea</strong><small> has practiced in the professional responsibility field since 1980.  Her law practice is devoted to advising lawyers and law firms on professional responsibility matters, including</small></h4>
        <ul>
          <li>Advisory ethics opinions
            <br>
          </li>
          <li>Expert witness on legal ethics and attorney discipline issues</li>
          <li>Disqualification and sanctions litigation in federal and state courts</li>
          <li>Risk management for law firms</li>
          <li>Law firm disputes and dissolutions</li>
          <li>Bar admission proceedings</li>
          <li>Disciplinary defense in bar investigations and prosecutions</li>
        </ul>
      </div>
      <!-- /.col-md-8 -->
    </div>
    <!-- /.row -->

  </div>
  <!-- /main-info -->

</div>
<!-- /container-body -->

<!-- Footer -->
<div class="navbar navbar-fixed-bottom">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>2 6 &nbsp; <span class="first2">B</span> R O A D W A Y , &nbsp; <span class="first2">1 8</span> T H &nbsp; <span class="first2">F</span> L O O R
          <br>
          <span class="first2">N</span> E W &nbsp; <span class="first2">Y</span> O R K , &nbsp; <span class="first2">N Y</span> , &nbsp; 1 0 0 0 4
          <br>
          <span class="first2">T</span> E L : 2 1 2 - 6 7 9 -9 0 9 0 &nbsp;
          <br>
        </p>
        <p>
      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-6">
        <p><a class="contact-text email-alert" href="mailto:sdm@mcshealaw.com">s d m @ m c s h e a l a w . c o m</a>
          <br>
          <a class="contact-text" href="#">D I R E C T I O N S</a>
        </p>
      </div>
      <!-- /.col-md-6 -->
    </div>
    <!-- /.row -->

  </div>

  <div id="footer-background" class="col-md-12">
    <p id="footer-text">2015 Law Offices of Sarah Diane McShea / Peer Rated AV Preeminent &reg 5.0 out of 5 / 2015 New York Area "Super Lawyer" / Attorney Advertising / <a href="doc/Disclaimer.pdf">Disclaimer</a> / Site Map</p>
  </div>
  <!-- /.col-md-12 -->
</div>


</div>
<!-- /.container -->

Answer 1

你的问题对我来说不是很清楚，但是如果你必须为主体容器制作一个边框，你可以使用四个fixed DIV 元素来做到这一点，每个元素都放在页面的 4 边缘。

HTML

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

CSS

#top, #bottom, #left, #right { position: fixed; }

这是 working demo .

阅读this post供完整引用。