Question

我正在尝试创建一个左侧有菜单栏，中间有主要内容的网站。我希望内容两侧的空白空间相等，即使在调整浏览器大小时也是如此。

这是一个粗略的演示：https://codepen.io/t-silver/pen/RMPmPW

然而，目前在调整大小时，内容消失在菜单栏下方。我理解这与位置有关：固定，但试验其他位置，浮动等只会导致菜单栏的外观破损（不再是全高，浮出浏览器两侧等）。我希望内容能够处理菜单栏的右侧，因为它正在处理浏览器窗口的左侧。

如何在不破坏菜单栏的情况下实现这一目标？

Html和CSS代码段：

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: #5882fa;
}

a:active {
  text-decoration: none;
  color: #5882fa;
}

html,
body {
  font-family: "Mina", sans-serif;
}

body {
  background-color: #e6e6e6;
}

img {
  max-width: 100%;
}

h1 {
  font-size: larger;
  font-weight: normal;
  margin: 0;
  padding: 5px 0px 5px 10px;
}

#wrapper {
  width: 750px;
  margin: 0 auto 0 auto;
}

#sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #000917;
}

#sidebar a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

#sidebar ul {
  float: left;
  list-style: none;
  padding: 20px 20px 0px 20px;
}

#title {
  font-size: 180%;
  font-weight: bold;
  color: white;
  padding: 30px 0px 0px 30px;
}

.column {
  -moz-column-count: 2;
  -moz-column-gap: 7px;
  -webkit-column-count: 2;
  -webkit-column-gap: 7px;
}

.fade {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
}

.collapse {
  cursor: pointer;
  position: relative;
  margin-top: 10px;
}

.chaps {
  position: absolute;
  bottom: 10%;
  left: 0px;
  visibility: hidden;
  color: white;
  background-color: #000917;
  padding-right: 10px;
}

.collapse:hover .chaps {
  visibility: visible;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

.content {
  padding: 20px 40px;
  background-color: #fafafa;
}

<body>
  <div id="sidebar">
    <div id="title">
      <h1>Nature you crazy</h1>
    </div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="birds.html">Birds</a></li>
      <li><a href="crocodiles.html">Crocodiles</a></li>
      <li><a href="buffalos.html">Buffalos</a></li>
    </ul>
  </div>
  <div id="wrapper">
    <div class="collapse">
      <img class="fade" src="http://www.nature-scene.net/ns/img/images/news/ph_001.jpg" />
      <h1 class="chaps">Pushing daisies</h1>
    </div>
    <div class="content">
      <p>
        Hello
      </p>
    </div>

    ...

  </div>

</body>

Answer 1

添加此项，只要菜单是固定宽度就可以了：

#wrapper {
  width: 750px;
  margin: 0 auto 0 auto;
  -webkit-transform: translateX(125px);
  -moz-transform: translateX(125px);
  -o-transform: translateX(125px);
  transform: translateX(125px);
}

Answer 2

将width添加到您的正文标记中，等同于padding-left:250px;

中的sidenavs

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: #5882fa;
}

a:active {
  text-decoration: none;
  color: #5882fa;
}

html,
body {
  font-family: "Mina", sans-serif;
}

body {
  background-color: #e6e6e6;
  padding-left:250px;
}

img {
  max-width: 100%;
}

h1 {
  font-size: larger;
  font-weight: normal;
  margin: 0;
  padding: 5px 0px 5px 10px;
}

#wrapper {
  width: 750px;
  margin: 0 auto 0 auto;
}

#sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #000917;
}

#sidebar a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

#sidebar ul {
  float: left;
  list-style: none;
  padding: 20px 20px 0px 20px;
}

#title {
  font-size: 180%;
  font-weight: bold;
  color: white;
  padding: 30px 0px 0px 30px;
}

.column {
  -moz-column-count: 2;
  -moz-column-gap: 7px;
  -webkit-column-count: 2;
  -webkit-column-gap: 7px;
}

.fade {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
}

.collapse {
  cursor: pointer;
  position: relative;
  margin-top: 10px;
}

.chaps {
  position: absolute;
  bottom: 10%;
  left: 0px;
  visibility: hidden;
  color: white;
  background-color: #000917;
  padding-right: 10px;
}

.collapse:hover .chaps {
  visibility: visible;
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
}

.content {
  padding: 20px 40px;
  background-color: #fafafa;
}

 <body>
      <div id="sidebar">
        <div id="title">
          <h1>Nature you crazy</h1>
        </div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="birds.html">Birds</a></li>
      <li><a href="crocodiles.html">Crocodiles</a></li>
      <li><a href="buffalos.html">Buffalos</a></li>
    </ul>
  </div>
  <div id="wrapper">
    <div class="collapse">
      <img class="fade" src="http://www.nature-scene.net/ns/img/images/news/ph_001.jpg" />
      <h1 class="chaps">Pushing daisies</h1>
    </div>
    <div class="content">
      <p>
        Hello
      </p>
    </div>
...

  </div>

</body>

<td valign="top" style = "padding: 12px 0px 0px 30px;" >  
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table style="display: none;">
            <tr>
                <td> <a href="#">apple</a> </td>
            </tr>
            <tr>
                <td> <a href="#">mango</a> </td>
            </tr>
            <tr>
                <td> <a href="url">carrot</a> </td>
            </tr>
        </table>
    </div>
</td>

中心div基于另一个div的右边缘

2 个答案: