代码之家  ›  专栏  ›  技术社区  ›  fightstarr20

CSS-固定标题和消息

css
  •  1
  • fightstarr20  · 技术社区  · 6 年前

    我有一个固定标题的基本布局。。。 

    function myFunction() {
    var x = document.getElementById("message");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
    html, body {
  margin:0;
  padding:0;
}

#message {
  background:red;
  color:white;
  text-align:center;
  padding:10px;
}

header {
  background:teal;
  color:white;
  text-align:center;
  position:fixed;
  width:100%;
  height:50px;
}

.content {
background:wheat;
padding-top:50px;
}
    <div id="message">
    This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
    <button onclick="myFunction()">Close Message</button>
</div>
<header>
    This is my header
</header>
<div class="content">
  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
</div>

    我希望标题和消息一样被修复,但是当我将其设置为“修复”时,它会破坏布局。我哪里做错了?

    6 回复  |  直到 6 年前
        1
  •  2
  •   pawel    6 年前

    如果你不支持IE<11( https://caniuse.com/#feat=flexbox )使用flexbox( https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox ). 

    function myFunction() {
    var x = document.getElementById("message");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#message {
  flex: 0 0 auto;
  padding: 10px;
  background: red;
  color: white;
  text-align: center;
}

header {
  flex: 0 0 auto;
  height: 50px;
  background: teal;
  color: white;
  text-align: center;
}

.content {
  flex: 1 1 auto;
  overflow: auto;
  background: wheat;
}
    <div class="container">
    <div id="message">
        This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
        <button onclick="myFunction()">Close Message</button>
    </div>

    <header>
        This is my header
    </header>

    <div class="content">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
      </p>
      <p>
          Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
      </p>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
      </p>
      <p>
          Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
      </p>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
      </p>
      <p>
          Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
      </p>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
      </p>
      <p>
          Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
      </p>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
      </p>
      <p>
          Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
      </p>
    </div>
</div>
        2
  •  1
  •   Temani Afif    6 年前

    添加另一个容器 fixed 删除邮件后,邮件头将位于正确位置。也可以使用JS调整填充: 

    document.querySelector('.content').style.paddingTop=document.querySelector('.fixed').clientHeight+"px";
function myFunction() {
    var x = document.getElementById("message");
    x.style.display = "none";
    document.querySelector('.content').style.paddingTop="50px";
}
    html, body {
  margin:0;
  padding:0;
}
.fixed {
 position:fixed;
 top:0;
 width:100%;
}
#message {
  background:red;
  color:white;
  text-align:center;
  padding:10px;
}

header {
  background:teal;
  color:white;
  text-align:center;
  width:100%;
  height:50px;
}

.content {
background:wheat;
padding-top:50px;
}
    <div class="fixed">
<div id="message">
    This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
    <button onclick="myFunction()">Close Message</button>
</div>
<header>
    This is my header
</header>
</div>
<div class="content">
  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
</div>
        3
  •  0
  •   configbug    6 年前

    我看不出有什么问题。如果希望邮件重叠,请使用以下代码: 

    #message {
  background:red;
  color:white;
  text-align:center;
  padding:10px;
  position:absolute;
  z-index:100;
}
        4
  •  0
  •   Borba    6 年前

    因此,如果您期望的行为是消息和标题应该滚动并始终显示在视图中,那么您还应该将position:fixed添加到您的消息:元素中。 

    #message {
  background:red;
  color:white;
  text-align:center;
  padding:10px;
  position: fixed;
}

    如果你想让标题保持在原来的位置,而不随着屏幕滚动,你应该删除位置:从标题固定。

        5
  •  0
  •   nvioli    6 年前

    你需要一些javascript,因为 fixed 元素从位置布局中取出,因此无法让浏览器计算 header 只有css。

    这里有一个解决方案,它运行一个函数 onload top 的 标题 message 到 position:fixed .

    它可以工作,但请注意,如果用户更改浏览器窗口的大小,则 属性将不会更新,您将得到意外的结果。如果你喜欢这个开头,你就得自己处理;)。 

    function myFunction() {
    var x = document.getElementById("message");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

window.onload = function() {
  var header = document.getElementsByTagName("header")[0];
  var headerTop = header.offsetTop;
  header.style.top = `${headerTop}px`;
  document.getElementById("message").style.position = "fixed";
}
    html, body {
  margin:0;
  padding:0;
}

#message {
  background:red;
  color:white;
  text-align:center;
  padding:10px;
}

header {
  background:teal;
  color:white;
  text-align:center;
  position:fixed;
  width:100%;
  height:50px;
}

.content {
background:wheat;
padding-top:50px;
}
    <div id="message">
    This is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed lengthThis is a message, the text can be dynamic so no fixed length
    <button onclick="myFunction()">Close Message</button>
</div>
<header>
    This is my header
</header>
<div class="content">
  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum nibh non convallis fringilla. Vivamus consequat pellentesque tortor eget dictum. Pellentesque fermentum nisi arcu, nec rutrum diam consectetur ut. Vestibulum ex risus, feugiat eu commodo in, dapibus vel velit. Nam eget lacus tortor. Mauris in risus diam. Sed magna velit, blandit ac pulvinar malesuada, malesuada vel ipsum. Nam imperdiet lobortis velit sed aliquet. Vivamus facilisis ante orci, ut convallis lacus sagittis eu. Maecenas ornare nisi a est semper imperdiet. Nulla facilisi. Pellentesque rutrum condimentum tincidunt. Nunc ut mattis diam, sed aliquam nisl. Aenean ullamcorper tellus et pretium molestie. Maecenas id tristique quam. Vestibulum non est enim.
  </p>
  <p>
      Aliquam sem ligula, facilisis non justo tempus, posuere tincidunt metus. Aliquam vestibulum nisl vel porta sagittis. Sed tempus vulputate metus, non dictum eros vulputate in. Vestibulum in dolor id metus facilisis porttitor. In sit amet mi molestie, auctor tortor vel, lobortis tortor. Ut bibendum mi dolor, vitae mollis nibh commodo eget. Donec sit amet dolor ex. Curabitur porta, ex id fermentum commodo, massa nulla blandit nunc, vitae suscipit orci nulla eget augue. In egestas feugiat nisl, et interdum orci feugiat eget. Vivamus egestas urna non vulputate finibus. Ut efficitur eros in dictum tempus. Integer ultricies consectetur risus sit amet venenatis. Duis et gravida justo, et pulvinar dolor. Proin sed imperdiet lectus. Sed quis ultricies orci, sit amet vehicula diam.
  </p>
</div>
        6
  •  0
  •   PriyankJ    6 年前

    你很亲近。你要做的就是移除 position:fixed; 从 header Here 

    .header {
  background:teal;
  color:white;
  text-align:center;
  width:100%;
  height:50px;
}
    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号