Welcome to my JSFiddle project: https://jsfiddle.net/mkdjetkq/1/
I am currently working on developing a website that showcases a stunning region as part of a personal challenge.
I have put in a lot of effort trying to consolidate everything I've accomplished so far onto a single page. My goal is to eliminate scrollbars and ensure the entire webpage fits within one browser window without the need for scrolling, purely for aesthetic reasons.
Despite experimenting with div heights and various other elements, I haven't been able to achieve the desired outcome. Adjusting div heights using percentages hasn't yielded the results I want. What changes do I need to make to my code in order to accomplish this?
CSS:
body,td,th {
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
width: 100%;
height: 100%;
}
#navigation {
color: white;
background-color: #292526;
width: 99%;
padding: 0.5% 0.5%;
}
#navigationLeft {
width: 24.5%;
display: inline-block;
vertical-align: middle;
font-size: 150%;
}
#navigationRight {
width: 74.5%;
display: inline-block;
vertical-align: middle;
}
#navigation ul {
float: right;
}
#navigation ul li {
display: inline;
}
#navigation a {
font-size: 100%;
color: white;
text-decoration: none;
}
#banner {
line-height: 0;
height: 70%;
}
#cliffPic {
width: 100%;
height: 70%;
}
#footer {
color: white;
background-color: #181818 ;
width: 99%;
padding: 0.5% 0.5%;
text-align: center;
}
HTML:
<div id="container">
<div id="navigation">
<div id="navigationLeft">
<a href="#">Visit Clare Ireland</a>
</div><!--
--><div id="navigationRight">
<ul>
<li><a href="#">Home |</a></li>
<li><a href="#">Maps |</a></li>
<li><a href="#">Hotels |</a></li>
<li><a href="#">Appartments |</a></li>
<li><a href="#">Attractions |</a></li>
<li><a href="#">Essentials |</a></li>
<li><a href="#">Bars & Clubs |</a></li>
<li><a href="#">Transport</a></li>
</ul>
</div>
</div>
<div id="banner">
<img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" id="cliffPic"/>
</div>
<div id="footer">
<p>Placeholder Text</p>
</div>
</div>