2
我試圖在頁面的左側放置一個藍條。它應占據從頁面頂部到底部的全部高度。但是，它不一定有內容。強制空的div佔滿整個頁面的高度
在另一個成員的建議下，我編輯了這個來包含我所有的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您的帖子。爲什麼當你可以輕鬆地將它添加到你的文章時提琴？ –
如果你認爲沒關係。在大多數網站上投入大量代碼被認爲是錯誤的。如果這是它在這裏完成的方式，那麼我將編輯我的文章。 – steelstring94
閱讀如何創建[mcve]。你不應該複製/粘貼你的整個網站，這就是爲什麼它是「錯誤的」。但提供一個jsfiddle來代替同樣的東西也是一樣的錯誤。理想情況下，你應該做的是減少你的代碼，只需要你需要的幫助就可以複製你擁有的東西，並將其包含在帖子本身中。 SO的目的是幫助他人 - 這意味着人們將在今後幾年內尋找這個問題並閱讀你的文章以獲得幫助。 jsfiddle不是這樣，所以如果jsfiddle鏈接斷開或者其他（你沒有在郵件中包含代碼本身）... –