个人中心
gpt4 book ai didi

html - 强制一个空的 div 占据整个页面的高度

转载 作者：可可西里 更新时间：2023-11-01 13:23:06 26 4
gpt4 key购买 nike

我想在我的页面左侧放置一个蓝色条。它应该占据页面从上到下的整个高度。但是，它不一定有内容。

根据另一位成员的建议，我对其进行了编辑以包含我所有的 HTML 和 CSS。

HTML:

    <!DOCTYPE html>

<html>

    <head>


        <title>anonymized</title>

    </head>

    <body>

        <div class = "wrapper">

        <div class = "sideBar">
                <p class = "sideBarText">We are anonymized. We are here to provide top-quality service for all our clients, no matter their needs.</p>  

              </div>

            <div class = "headerImage">

                <pre class = "logoLink">anonymized</pre>

            </div>

            <div class = "globalNav">

                <ul>
                    <li class = "globalNavItem">About Us</li>
                    <li class = "globalNavItem">Services</li>
                    <li class = "globalNavItem">Testimonials</li>
                    <li class = "globalNavItem">Contact</li>
                </ul>
            </div>





        <p>The 1881 world tour of King Kalākaua of the Kingdom of Hawaii was his attempt to save the Hawaiian culture and population from extinction through the importation of a labor force from Asia-Pacific nations. His efforts brought the small island nation to the attention of world leaders, but sparked rumors that the kingdom was for sale. In Hawaii there were critics who believed the labor negotiations were just his excuse to see the world. The 281-day trip gave him the distinction of being the first monarch to circumnavigate the globe, just as his 1874 travels had made him the first reigning monarch to visit America and the first honoree of a state dinner at the White House.

Kalākaua met with heads of state in Asia, the Mideast and Europe, to encourage an influx of sugar plantation labor in family groups, as well as unmarried women as potential brides for Hawaii's existing contract laborers. While in Asia, he tried to forestall American ambitions by offering a plan to Emperor Meiji for putting Hawaii under the protection of the Empire of Japan with an arranged marriage between his niece Kaiulani and a Japanese prince. On his visit to Portugal, he negotiated a treaty of friendship and commerce with Hawaii that would provide a legal framework for the emigration of Portuguese laborers to Hawaii. The King had an audience in Rome with Pope Leo XIII and met with many of the crowned heads of Europe. Britain's Queen Victoria and the splendor of her royal life impressed him more than any other monarchy; having been greatly affected by the ornate trappings of European sovereigns, he would soon have Hawaii's monarchy mirror that grandeur.

The King traveled with no security guards; only a small group of personal friends made the journey with him. Except for land transportation in cities, and two loaned ships in China and the US, his modes of transportation were seldom reserved exclusively for him. He shared regularly scheduled steamships and rail transport with fare-paying passengers. On the Red Sea, he played cards and danced with other passengers. Like other tourists, he visited the white elephants of Siam, the Giza pyramid complex in Egypt, tourist sites in India, and museums in Europe. Along the way, he exceeded his original budget, went shopping anyway, and sent letters back home.

President James A. Garfield died four days before they arrived back in the United States, and Kalākaua paid a courtesy call to newly inaugurated President Chester A. Arthur at the White House in Washington, D.C. There were no public or private appearances for the King in New York, only a day at Coney Island. Before leaving the eastern US, the King met with Thomas Edison to have a demonstration of electric lights, and visited Virginia's Fort Monroe. He toured Hampton Normal and Agricultural School, and shopped for horses in Kentucky. The royal party boarded a train to California, where they were house guests of Claus Spreckels at his estate in Aptos (near Santa Cruz), and had a few days of seeing the sights in the area before sailing back to Hawaii. Kalākaua was successful in jump-starting new immigration, with the first transplants arriving in Hawaii less than a year later. In the years that followed, he began emulating the lifestyles of European royalty with expensive furnishings in Iolani Palace, a public coronation of himself, and a two-week public celebration of his birthday.</p>
        </div>



    </body>


</html>

以及完整的 CSS:

* {
    margin: 0;
    padding: 0;
}

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

  height: 100%;
  min-height: 100%;
}

.wrapper {

    width: 75%;
    height: 100%;
    margin: auto;
    border: 1px solid black;
}


.headerImage {
    width: 80%;
    height: 15em;
    background-image: url("skyline.jpg");
    margin: auto;
    background-size: 100% 400px;
    background-repeat: no-repeat;

    box-sizing: border-box;

}

.globalNav {
    margin: auto;
    background-color: blue;
    width: 80%;
    text-align: center;
    top: 0;

}

.globalNavItem {
    display: inline-block;
    color: white;
    font-size: 1.0em;
    padding: 0.5em 6%;
    margin: 0;
}

.sideBar {
    width: 10%;
    min-height: 100%;
    background-color: blue;
    float: left;

    margin: 0;
    box-sizing: border-box;
}



p {
    font-size: 72px;
    text-align: justify;

}

.sideBarText {
    width: 100%;
    font-size: 12pt;
    color: white;
    display: inline-block;
    margin: 0;
    padding: 3px;
    box-sizing: border-box;
    text-align: center;
}

这是整个事情的 JSFiddle:https://jsfiddle.net/d7vdkp4c/

如您所见，我现在所拥有的确实会导致 div 占据可见高度的 100%。包装器 div 折叠等于我认为所谓的“视口(viewport)高度”(我是网络开发的新手；试图自学)。这意味着如果我向下滚动，该栏不会继续。

我一直在 Google 上对此进行大量研究，我读过的许多答案都在 StackOverflow 上，但似乎没有一个解决这个问题 - 使 100% 的高度一直延伸到整个网页的底部，而不仅仅是可见屏幕。

非常感谢您对此提供的任何帮助。虽然我将非常感谢任何答案，但由于我是新手，所以如果任何解决方案都可以保持简单，我将非常感激 - 或者如果这不可能，那么可以详细解释它们，或者一些外部的包含的资源将详细解释。我要学习!

谢谢!

最佳答案

由于 .wrapper 包装了您的所有内容，因此添加 position: relative; padding-left: 10%，然后将 .sidebar 定位为 position: absolute;顶部:0；底部:0；左:0； width: 10%; 所以它会从 .wrapper

的顶部延伸到底部 

* {
  margin: 0;
  padding: 0;
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
}

.wrapper {
  width: 75%;
  margin: auto;
  border: 1px solid black;
  position: relative;
  padding-left: 10%;
  box-sizing: border-box;
}

.logoLink {
  font-family: 'Russo One', sans-serif;
  color: white;
  font-size: 2.5em;
}

.headerImage {
  width: 80%;
  height: 15em;
  background-image: url("skyline.jpg");
  margin: auto;
  background-size: 100% 400px;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.globalNav {
  margin: auto;
  background-color: blue;
  width: 80%;
  text-align: center;
  top: 0;
}

.globalNavItem {
  display: inline-block;
  color: white;
  font-size: 1.0em;
  padding: 0.5em 6%;
  margin: 0;
}

.sideBar {
  width: 10%;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  box-sizing: border-box;
}


/*Everything relating to pageNav is currently
  irrelevant as pageNav is commented out in the
  HTML*/

.pageNav {
  display: inline-block;
  border-width: 7px;
  border-style: ridge;
  float: left;
  width: 6%;
  text-align: center;
  background-color: lightgray;
  margin: 0.1em 0.7em 0.3em 0;
  min-width: 5.3em;
}

.pageNavHeader {
  font-weight: bold;
}

.pageNavItem {
  border-width: 2px 0 0 0;
  border-color: black;
  border-style: solid;
}

p {
  font-size: 72px;
  text-align: justify;
}

.sideBarText {
  width: 100%;
  font-size: 12pt;
  color: white;
  display: inline-block;
  margin: 0;
  padding: 3px;
  box-sizing: border-box;
  text-align: center;
}
<!DOCTYPE html>
<title>anonymized</title>
<body>
  <div class="wrapper">

    <div class="sideBar">
      <p class="sideBarText">We are anonymized. We are here to provide top-quality service for all our clients, no matter their needs.</p>

    </div>

    <div class="headerImage">

      <pre class="logoLink">anonymized</pre>

    </div>

    <div class="globalNav">

      <ul>
        <li class="globalNavItem">About Us</li>
        <li class="globalNavItem">Services</li>
        <li class="globalNavItem">Testimonials</li>
        <li class="globalNavItem">Contact</li>
      </ul>
    </div>



    <!-- <div class = "pageNav">
			<ul style = "list-style: none;">
				<li class = "pageNavHeader">Home</li>
				<li class = "pageNavItem">Test1</li>
				<li class = "pageNavItem">Test2</li>
				<li class = "pageNavItem">Test3</li>
				<li class = "pageNavItem">Test4</li>
				<li class = "pageNavItem">Test5</li>
				<li class = "pageNavItem">Test6</li>
			</ul>
		</div> -->

    <p>The 1881 world tour of King Kalākaua of the Kingdom of Hawaii was his attempt to save the Hawaiian culture and population from extinction through the importation of a labor force from Asia-Pacific nations. His efforts brought the small island nation
      to the attention of world leaders, but sparked rumors that the kingdom was for sale. In Hawaii there were critics who believed the labor negotiations were just his excuse to see the world. The 281-day trip gave him the distinction of being the first
      monarch to circumnavigate the globe, just as his 1874 travels had made him the first reigning monarch to visit America and the first honoree of a state dinner at the White House. Kalākaua met with heads of state in Asia, the Mideast and Europe,
      to encourage an influx of sugar plantation labor in family groups, as well as unmarried women as potential brides for Hawaii's existing contract laborers. While in Asia, he tried to forestall American ambitions by offering a plan to Emperor Meiji
      for putting Hawaii under the protection of the Empire of Japan with an arranged marriage between his niece Kaiulani and a Japanese prince. On his visit to Portugal, he negotiated a treaty of friendship and commerce with Hawaii that would provide
      a legal framework for the emigration of Portuguese laborers to Hawaii. The King had an audience in Rome with Pope Leo XIII and met with many of the crowned heads of Europe. Britain's Queen Victoria and the splendor of her royal life impressed him
      more than any other monarchy; having been greatly affected by the ornate trappings of European sovereigns, he would soon have Hawaii's monarchy mirror that grandeur. The King traveled with no security guards; only a small group of personal friends
      made the journey with him. Except for land transportation in cities, and two loaned ships in China and the US, his modes of transportation were seldom reserved exclusively for him. He shared regularly scheduled steamships and rail transport with
      fare-paying passengers. On the Red Sea, he played cards and danced with other passengers. Like other tourists, he visited the white elephants of Siam, the Giza pyramid complex in Egypt, tourist sites in India, and museums in Europe. Along the way,
      he exceeded his original budget, went shopping anyway, and sent letters back home. President James A. Garfield died four days before they arrived back in the United States, and Kalākaua paid a courtesy call to newly inaugurated President Chester
      A. Arthur at the White House in Washington, D.C. There were no public or private appearances for the King in New York, only a day at Coney Island. Before leaving the eastern US, the King met with Thomas Edison to have a demonstration of electric
      lights, and visited Virginia's Fort Monroe. He toured Hampton Normal and Agricultural School, and shopped for horses in Kentucky. The royal party boarded a train to California, where they were house guests of Claus Spreckels at his estate in Aptos
      (near Santa Cruz), and had a few days of seeing the sights in the area before sailing back to Hawaii. Kalākaua was successful in jump-starting new immigration, with the first transplants arriving in Hawaii less than a year later. In the years that
      followed, he began emulating the lifestyles of European royalty with expensive furnishings in Iolani Palace, a public coronation of himself, and a two-week public celebration of his birthday.</p>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="globalNavScrollLock.js"></script>
</body>

关于html - 强制一个空的 div 占据整个页面的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43530681/

26 4 0
文章推荐： php - 如何在 php WSDL 中指定端口名称
文章推荐： windows - 尺寸大于屏幕尺寸的窗体截图
文章推荐： php - Web 服务器上使用的 file_put_contents 编码？
文章推荐： html - 如何删除电子邮件签名中的超链接下划线
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com