如何使主要内容位于页面中间并去除空白？

Question

请帮忙，我需要右边栏上的白色 space 消失，主要内容的位置放在页面中间。

我该怎么办？有什么建议吗？

这是我的网站：http://www.plebonline.co.uk

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #ea730b;
}

.clock {
  color: white;
  text-align: center;
  padding: 16px 18px;
  display: block;
}

.leftbar {
  float: left;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.rightbar {
  float: right;
  background-color: #333;
  width: 10%;
  margin: 0;
  padding: 1em;
  margin-bottom: -5000px;
  padding-bottom: 5000px; 
  overflow: hidden;
}

.maincontent {
  padding: 0;
  float:left;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #ff00ff;
  width: 80%;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="wip.html">Projects</a></li>
  <li><a href="wip.html">Notes</a></li>
  <li><a href="wip.html">About</a></li>
  <li><a href="wip.html">Contact</a></li>
  <li style="float:right" class="clock" id="clock"></li>
  <script>
    var today = new Date();
    document.getElementById('clock').innerHTML=today;
  </script>
</ul>

<div class="leftbar"></div>

<div class="maincontent"></div>

<div class="rightbar"></div>

Answer 1

我注意到您没有将右栏和左栏放在任何 div 中。在我这里的代码中，我删除了左右栏。如果你想让它们回来，你可以调整代码。

最好添加一些容器来容纳所有元素。正如您注意到 header 和主要内容在 div class .container.

中

希望对您有所帮助。

html,body {
    margin:0;
    padding:0;
    height: 100%;

/* 
* The container which hold the header and the main content 
*/
.container {
    width:100%;
    position: absolute;
    height:1200px;
    background:#333;
    }

/* 
* Header which contain your menu and date 
*/
.header {
    width:100%;
    }

/* 
* The main content of your site 
*/
.maincontent {
    width:80%;
    max-width:1000px;
    background-color: #fff;
    float:left;
    left:50%;
    height:100%;
    margin-left:-500px;
    position: absolute;
    }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #ea730b;
}

.clock {
    color: white;
    text-align: center;
    padding: 16px 18px;
    display: block;
}

</style>

<body>
<div class="container">
<div class="header">
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="wip.html">Projects</a></li>
  <li><a href="wip.html">Notes</a></li>
  <li><a href="wip.html">About</a></li>
  <li><a href="wip.html">Contact</a></li>
  <li style="float:right" class="clock" id="clock"></li>
  <script>
    var today = new Date();
    document.getElementById('clock').innerHTML=today;
  </script>
</ul>
</div>

<div class="container">
<div  class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>

Answer 2

有一个 div 标签关闭而不打开可能是导致问题的原因。

变化：

<div class="leftbar"></div>

<div class="maincontent"></div>

</div>
<div class="rightbar"></div>

收件人：

 <div class="leftbar"></div>

    <div class="maincontent"></div>

    <div class="rightbar"></div>

如何使主要内容位于页面中间并去除空白？

How to make main content in the middle of the page and remove white gaps?

html

css

whitespace

removing-whitespace