I am trying to put a blue bar on the left side of my page. It should take up the full height from top to bottom of the page. It will not necessarily have content, however.
On the advice of another member I've edited this to contain all my HTML and CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://ift.tt/2p0UhOP" rel="stylesheet">
<link href = "style.css" rel = "stylesheet" type = "text/css" />
<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>
<!-- <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="http://ift.tt/2nYZfvi"></script>
<script src = "globalNavScrollLock.js"></script>
</body>
</html>
And the full 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;
}
.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%;
min-height: 100%;
background-color: blue;
float: left;
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;
}
Here is a JSFiddle of the whole thing: http://ift.tt/2p0SdWW
As you can see, what I have right now does indeed cause the div to take up 100% of the height - of what's visible. The wrapper div collapses to be equal to what I believe is known as the "viewport height" (I am new to web development; trying to teach myself). This means that if I scroll down, the bar does not continue.
I've been researching this a ton on Google, and many of the answers I've read have been here on StackOverflow, but none of them seem to account for this problem - making that 100% height stretch all the way to the bottom of the entire webpage, not just the visible screen.
Any help with this is greatly appreciated. While I will be very grateful for any answer, I would, since I am new to this, really appreciate it if any solutions could be kept simple - or if that is not possible, that they could be either explained in detail, or some external resource included which will explain in detail. I want to learn!
Thank you!
Aucun commentaire:
Enregistrer un commentaire