How to make static div take up half of the page with 100% height
Question
I am trying to make a static div stay on 50% of the left side of the screen and function as the navigation. The content will be on the right side and is scrollable. An example would be this site http://minusfirm.com/ Can anyone help me crack this nut? Thanks!
4 answers
solution1
1 2016-01-09 02:38:40
This should work...
<div style="width: 50%;">
<div style="float:left; width: 50%">
Navigation
</div>
<div style="float:right;">
Other Stuff
</div>
</div>
solution2
1 2016-01-09 02:38:59
Make the width of your two divs at 50% width: 50%; and make one of your position fixed position: fixed;
HTML
<div id="nav" class="centertext">
right side
</div>
<div id="content">
left side
</div>
CSS
#nav {
width: 50%;
position: fixed;
float: left;
background: #01ffA0;
}
#content {
float:right;
width: 50%;
height: 100%;
float: right;
background: #0130A0;
}
check this codepen for more details Link
solution3
1 ACCPTED 2016-01-09 03:01:22
Alright, first I will assume you want this in pure CSS so here I will give you the code. This code will have the floats react to different screen sizes.
body { margin: 0px; } #mainNavigation { background-color: lightblue; position: fixed; float: left; margin: 0px; padding-top: 20%; padding-bottom: 40%; width: 50%; } #mainNavigation li { list-style: none; font-size: 1.5em; padding-left: 35%; } #otherContent { background-color: blue; color: white; float: right; margin: 0px; padding-top: 10%; padding-bottom: 50%; padding-left: 21%; padding-right: 5%; }
<div id="mainNavigation"> <h1>Heading, Image, or Title</h1> <ul> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> <li><a href="#">Link</a> </li> </ul> </div> <div id="otherContent"> <h2>All of this content is assumed</h2> <p>Lorem ipsum dolor sit amet, consectetur <br />adipiscing elit. Vivamus ante magna, malesuada <br />nec ligula eget, hendrerit porttitor mauris. <br />Praesent in. </div>
With a bit of tweaking with media queries this code will be about as mobile as the example Minus Firm. The reason I add the padding properties seperately is to help visualize the code.
solution4
1 2016-01-09 03:01:58
Basically, it's a combo of two different CSS settings:
- The navigation section on the left has a position of fixed (and definitions of where in the display it is "fixed" to), and is set to 100% height and 50% width.
- The content section on the right is set to float to the right (literally "float: right;" in the CSS), and the width is set to take up the remaining 50%.
The following HTML is a made-up example, based on the site you linked to. Just copy the html, paste it into a text editor, and save the file as "largenav.html" or some other html file. Then open it in a browser.
<html>
<head>
<style type="text/css">
#nav {
width:50%;
height:100%;
position: fixed;
top: 0;
left: 0;
background: #FF8833;
}
#content {
width: 50%;
float: right;
background: #3388FF;
}
div.scrollsection {
border: 1px solid #FF0000;
display: block;
height: 1000px;
background: #888888;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>First Nav</li>
<li>Second Nav</li>
<li>etc.</li>
</ul>
</div>
<div id="content">
<div class="scrollsection">First chunk of scroll content</div>
<div class="scrollsection">Second chunk of scroll content</div>
<div class="scrollsection">Third chunk of scroll content</div>
<div class="scrollsection">[You get the idea...]</div>
</div>
</body>
</html>
I would also recommend getting familiar with the developer tools in your favorite browser (personally, I use Google Chrome for all initial development, just because of the dev tools. However, I don't want to start a flame war--FireFox has some good built in tools and excellent addons that make life wonderful, and I haven't used MS Edge, but IE developer tools were getting better over time.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.