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

3

我想在页面左侧放置一个蓝色的条形。它应该从页面顶部一直延伸到底部,占据整个高度。它不一定需要内容。

根据另一位成员的建议,我已经编辑了所有我的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崩溃成与我认为被称为“视口高度”相等(我是网页开发新手;正在尝试自学)。这意味着如果我向下滚动,该栏不会继续。
我在Google上进行了大量研究,其中许多答案都在StackOverflow上,但没有一个答案似乎解决了这个问题-使那100%的高度延伸到整个网页底部,而不仅仅是可见屏幕。
非常感谢您提供任何帮助。虽然我会非常感激任何答案,但由于我是新手,如果任何解决方案能保持简单,我会非常感激-或者如果不可能,那么它们可以详细解释,或者包含一些外部资源,以便详细说明。我想学习!
谢谢!

将HTML和CSS放入您的帖子中。为什么要制作一个小测试,当您可以轻松地将其添加到您的帖子中呢? - Michael Coker
如果您认为可以的话,在大多数网站上,将大量代码放入帖子中被认为是错误的。如果这里的做法是这样的话,那么我会编辑我的帖子。 - user7898281
阅读如何创建一个[mcve]。您不应该复制/粘贴整个网站,这就是为什么它是“错误”的原因。但是,提供一个jsfiddle来代替也同样是错误的。理想情况下,您应该将代码缩减到需要帮助的必要部分,并将其包含在帖子本身中。SO的目的是帮助他人-这意味着人们将在今天之后的多年里搜索此问题并阅读您的帖子以获得帮助。jsfiddle不是SO,因此如果jsfiddle链接断开或其他(您没有在帖子本身中包含代码)... - Michael Coker
如果不包含代码,那么对未来的人们就没有用处或帮助。明白为什么需要在帖子本身中包含代码了吗?但是,不要只是复制和粘贴整个网站。只需包括与您问题相关的必要部分即可。 - Michael Coker
好的,我已经删掉了所有不必要的东西。很抱歉我弄错了;这是我在这里发布的第一次。 - user7898281
不用担心!非常感谢。在帖子编辑器中还有一个“片段”工具(图标看起来像<>),它基本上是与jsfiddle相同的界面。理想情况下,您应该将代码放在其中。 - Michael Coker
1个回答

2

由于.wrapper包含了所有内容,请添加position: relative; padding-left: 10%,然后使用position: absolute; top: 0; bottom: 0; left: 0; width: 10%;定位.sidebar,使其从顶部到底部覆盖.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>


谢谢!这个有效。我需要调整填充来使所有内容按照我想要的方式对齐,但这样可以让它填满整个空间,就像我想要的那样。我会确保研究具体原因;非常感谢! - user7898281

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接