Question

我在左侧有一个固定的菜单栏。在右边，我得到了一个部分。该部分被假定为填充100％的视口宽度减去固定的菜单栏宽度并减去该部分本身的边距和填充。现在我也试图将图像置于此部分的中心 - 这是你可以在小提琴中看到的黑线。它被假定为蓝色区域（区域）的中心。

问题

您可以看到该部分太宽，图像不是居中但是向右移动了一点。

注意： 不应该滚动x轴

代码 - ＆gt; https://jsfiddle.net/n9yyrxfm/

＆＃13;

html,
body {
  border-sizing: border-box;
  font-family: "Dosis", "Arial", "Serif";
  text-decoration: none;
  font-size: 20px;
  margin-left: 10px;
  padding: 0;
  height: 100%;
  width: 100%;
}

.navbar-menu {
  z-index: 100;
  position: fixed;
  width: 15vw;
  height: 100%;
  color: #000;
  margin-top: 4vh;
}

.navbar-menu ul {
  padding-left: 0;
}

.navbar-menu ul li {
  display: block;
  width: 140px;
  font-size: 22px;
  padding: 4px 0 4px 10px;
  margin-top: 20px;
}

p {
  width: 250px;
}

div#content {
  /*margin-left: -140px*/
  margin-left: 160px;
  margin-right: 160px;
  height: 200px;
}

section {
  width: 100%;
  color: #000;
  display: block;
  position: absolute;
  top: 35px;
  background: lightblue;
  transition: opacity 0.9s linear;
  -webkit-transition: opacity 0.9s ease-in-out;
  -moz-transition: opacity 0.9s ease-in-out;
}

section#sec-home img {
  width: 250px;
  display: block;
  margin: 0 auto 0 auto;
  border-radius: 76px 171px 87px 171px;
  -moz-border-radius: 76px 171px 87px 171px;
  -webkit-border-radius: 76px 171px 87px 171px;
  border: 5px solid #000000;
  -webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}

＆＃13;

<nav class="navbar-menu">
  <ul id="list" class="test">
    <li id="emph nav-home">Home</li>
    <li id="nav-portfolio">Portfolie</li>
    <li id="nav-skills">Færdigheder</li>
    <li id="nav-erfaring">Erfaring</li>
    <li id="nav-kontakt">Kontakt mig</li>
  </ul>
</nav>
<div id="content">
  <section class="animatedFade" id="sec-home">
    <img src="images/portrait1.png" alt="">
    <p>asdfr <span class="navn">asdfian</span></p>
  </section>
</div>

＆＃13;

Answer 1

由于您在左侧边栏使用position: fixed，因此请为父级使用相同的padding。因此，如果内容同时包含margin-left和margin-right，请将内容保留为全宽，而不是margin。

＆＃13;

html,
body {
  border-sizing: border-box;
  font-family: "Dosis", "Arial", "Serif";
  text-decoration: none;
  font-size: 20px;
  margin-left: 10px;
  padding: 0 0 0 15vw; /* Change this to navbar width. */
  height: 100%;
  width: 100%;
  margin: 0;  /* Add this. */
  box-sizing: border-box; /* Add this. */
}

.navbar-menu {
  z-index: 100;
  position: fixed;
  width: 15vw;
  height: 100%;
  color: #000;
  left: 0; /* Add this. */
  margin-top: 4vh;
}

.navbar-menu ul {
  padding-left: 0;
}

.navbar-menu ul li {
  display: block;
  width: 100%;
  font-size: 22px;
  padding: 4px 0 4px 10px;
  margin-top: 20px;
}

p {
  width: 250px;
}

div#content {
/* Remove these.
  margin-left: 160px;
  margin-right: 160px;
*/
  height: 200px;
}

section {
/*  width: 100%;  remove */
  color: #000;
  display: block;
/*  position: absolute; remove */
  margin-top: 35px; /* replace */
  background: lightblue;
  transition: opacity 0.9s linear;
  -webkit-transition: opacity 0.9s ease-in-out;
  -moz-transition: opacity 0.9s ease-in-out;
}

section#sec-home img {
  width: 250px;
  display: block;
  margin: 0 auto 0 auto;
  border-radius: 76px 171px 87px 171px;
  -moz-border-radius: 76px 171px 87px 171px;
  -webkit-border-radius: 76px 171px 87px 171px;
  border: 5px solid #000000;
  -webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}

＆＃13;

<nav class="navbar-menu">
  <ul id="list" class="test">
    <li id="emph nav-home">Home</li>
    <li id="nav-portfolio">Portfolie</li>
    <li id="nav-skills">Færdigheder</li>
    <li id="nav-erfaring">Erfaring</li>
    <li id="nav-kontakt">Kontakt mig</li>
  </ul>
</nav>
<div id="content">
  <section class="animatedFade" id="sec-home">
    <img src="images/portrait1.png" alt="">
    <p>asdfr <span class="navn">asdfian</span></p>
  </section>
</div>

＆＃13;

这是固定流体布局的问题。请参阅Science behind Fixed-Fluid Layouts上的指南。

Answer 2

由于.navbar-menu已position: fixed，所有其他元素都会忽略它。

但是，由于它具有固定宽度，因此您可以使用calc轻松解决问题：

section {
    width: calc(100% - 15vw);
}

请注意，您还需要删除部分中的边距，以免使其大于此值。

动态填充尽可能宽的宽度

2 个答案: