单击锚 link 后整个 body 向上移动

Question

我对以下 HTML/CSS 有疑问：

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  width: 100%;
  height: 50px;
  background-color: #353535;
}

.toolbar>.title {
  width: 220px;
  float: left;
  font-size: 1.6em;
  color: #d3d3d3;
  padding: 8px 10px;
  cursor: pointer;
}

.content {
  width: 100%;
  height: calc(100% - 95px);
  display: flex;
}

.content>div {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
}

.content>div:first-child {
  flex: 0 1 auto;
  width: 33%;
}

.content>div:last-child {
  flex: 2 1 67%;
  margin-top: 1%;
  margin-left: 50px;
  height: 98% !important;
  overflow-x: hidden;
  overflow-y: scroll;
}

.content>div>.resizable_editor {
  width: 100%;
  height: 100%;
  display: flex;
}

.footer {
  text-align: center;
  color: #646262;
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #24292e;
  font-size: 16px;
  line-height: 24px;
  word-wrap: break-word;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body> :first-child {
  margin-top: 0 !important;
}

.markdown-body> :last-child {
  margin-bottom: 0 !important;
}

#queryPanel,
#resultPanel {
  display: none;
}

<div class="toolbar">
  <div class="title">Title</div>
</div>
<div class="content">
  <div id="configPanel">
    <h3>Configuration</h3>
    <div class="resizable_editor">
      <p>some text to edit</p>
    </div>
  </div>
  <div id="queryPanel"></div>
  <div id="resultPanel"></div>
  <div id="docPanel" class="markdown-body">
    <h2 id="summary">Summary</h2>
    <ul>
      <li><a href="#first_anchor">First Anchor</a></li>
      <li><a href="#second_anchor">Second Anchor</a></li>
    </ul>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>
    <p> text Intro</p>

    <h1 id="first_anchor">First Anchor</h1>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>
    <p>Some text for anchor 1</p>

    <h1 id="second_anchor">Second Anchor</h1>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>
    <p>Some text for anchor 2</p>

  </div>
</div>
<div class="footer">
  <p>Some text footer</p>
</div>

第一个显示是正确的，但是点击其中一个链接后，整个body向上移动了几个像素，我不明白为什么：

第一次显示：

点击second anchor后：

如何防止 body 向上移动？

这里是JSFiddle重现问题

Answer 1

如果您希望您的代码与 CSS Flexbox 配合良好，您可以将以下属性添加到具有 configPanel 的 div id.

display: flex;
flex-direction: column;

所以，应该是这样的：

.content > div:first-child {
    flex: 0 1 auto;
    width: 33%;
    display: flex;
    flex-direction: column;
}

结果如下：

body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.toolbar {
    width: 100%;
    height: 50px;
    background-color: #353535;
}

.toolbar > .title {
    width: 220px;
    float: left;
    font-size: 1.6em;
    color: #d3d3d3;
    padding: 8px 10px;
    cursor: pointer;
}

.content {
    width: 100%;
    height: calc(100% - 95px);
    display: flex;
}

.content > div {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: 100%;
}

.content > div:first-child {
    flex: 0 1 auto;
    width: 33%;
    display: flex;
    flex-direction: column;
}

.content > div:last-child {
    flex: 2 1 67%;
    margin-top: 1%;
    margin-left: 50px;
    height: 98% !important;
    overflow-x: hidden;
    overflow-y: scroll;
}

.content > div > .resizable_editor {
    width: 100%;
    height: 100%;
    display: flex;
}

.footer {
    text-align: center;
    color: #646262;
}

.markdown-body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color: #24292e;
    font-size: 16px;
    line-height: 24px;
    word-wrap: break-word;
}

.markdown-body::before {
    display: table;
    content: "";
}

.markdown-body::after {
    display: table;
    clear: both;
    content: "";
}

.markdown-body > :first-child {
    margin-top: 0 !important;
}

.markdown-body > :last-child {
    margin-bottom: 0 !important;
}

#queryPanel,
#resultPanel {
  display: none; 
}

<body>
  <div class="toolbar">
    <div class="title">Title</div>
  </div>
  <div class="content">
    <div id="configPanel">
      <h3>Configuration</h3>
      <div class="resizable_editor">
        <p>
          some text to edit
        </p>
      </div>
    </div>
    <div id="queryPanel"></div>
    <div id="resultPanel"></div>
    <div id="docPanel" class="markdown-body">
      <h2 id="summary">Summary</h2>
      <ul>
        <li><a href="#first_anchor">First Anchor</a></li>
        <li><a href="#second_anchor">Second Anchor</a></li>
      </ul>
      <p> text Intro</p>
      <p> text Intro</p>

      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>
      <p> text Intro</p>

      <h1 id="first_anchor">First Anchor</h1>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>
      <p>Some text for anchor 1</p>

      <h1 id="second_anchor">Second Anchor</h1>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>
      <p>Some text for anchor 2</p>

    </div>
  </div>
  <div class="footer">
    <p>Some text footer</p>
  </div>
</body>

单击锚 link 后整个 body 向上移动

Entire body moved up after clicking on anchor link

html

css

anchor

offset