I have a popup div which has a height of 100%.
.popup{
height:100%;
}
I have gone ahead and created a 60% margin top
.popup{
margin-top:60%;
}
and so only 40% of space is available at the bottom end of the popup.
In the 40% bottom space,i want to have a scrollable div container of maybe height of 500px. This does not work and only the 40% space is available and no scrolling bars appear.
How can i have 500px on the 40% space available?.
Check this snippet:
body,
html,
.outer {
width: 100%;
height: 100%;
}
.wrapper-top, .wrapper-bottom {
position: relative;
width: 400px;
top: 0;
bottom: 0;
border: 1px solid #555;
}
.wrapper-top {
height: 60%;
}
.wrapper-bottom {
height: 40%;
}
.inner {
position: absolute;
width: 100%;
top: 0px;
bottom: 0px;
overflow-y: auto;
}
<div class="outer">
<div class="wrapper-top">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="wrapper-bottom">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
.main{
width:100%;
height:350px;
border:1px solid;
}
.top{
width:100%;
height:60%;
border:1px solid red;
}
.bottom{
display:inline-block;
width:100%;
height:38%;
border:1px solid #ff6600;
padding:5px;
overflow:auto;
}
.content{
width:100%;
height:500px;
border:1px solid blue;
}
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="content"></div>
</div>
</div>
Please check this fiddle: https://jsfiddle.net/vadimb/wx2v7pj6/
.popup {
margin-top: 60%;
background-color: red;
height: 250px;
overflow: hidden;
}
.inner {
overflow-y: scroll;
height: 250px;
}
And html
<div class="popup">
<div class="inner">
abcd<br/>....
</div>
</div>
Related
I have two nested divs that are both position: fixed. The outer div holds text-content and scrolls internally using a defined height and overflow-y: auto. The inner div represents a popover menu containing links that represent actions. The popover menu is offset to the right, so it overlaps the content-div and its scrollbar slightly.
When I hover (or want to click) on a link in the inner div, it works as expected, except when the mouse ison the portion of the link that is also hovering the scrollbar that is rendered behind the popover-menu div.
This codepen illustrates the problem.
I could probably change the HTML, but I prefer a solution in CSS that allows me to hover on the marked position and still "activate" the link instead of the scrollbar that is visually behind the div.
You can not do what you are trying to do with that HTML, it will not work if you have directly nested fixed parent-child
html structure has to be like below
<div class="wrapper"> <<<<< this is fixed
<div class="internal-scroll"> <<<<< this is relative
<div class="overlay"> <<<<<< this is fixed
<a>hover me, where the scrollbar is</a>
</div>
</div>
</div>
.wrapper {
position: fixed;
// add top, right, bottom, left
}
.internal-scroll {
top: 5px;
left: 5px;
width: 200px;
height: 200px;
overflow-y: auto;
border: LightCoral 2px solid;
}
.overlay {
position: fixed;
top: 40px;
left: 160px;
width: 100px;
padding: 5px;
background: aliceblue;
border: solid 2px SlateBlue;
z-index: 999;
}
.overlay a:hover {
background: green;
cursor: pointer;
}
<div class="wrapper">
<div class="internal-scroll">
<div class="overlay">
<a>hover me, where the scrollbar is</a>
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
</div>
Also, have in mind that fixed elements different to absolutes ones, do not take any ascending relative parent as positioning reference, they take viewport as reference. So there is actually no need to to have fixed parent-child elements.
You can just place overlay outside internal-scroll and have the same behaviour.
See an example:
.internal-scroll {
position: fixed;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
overflow-y: auto;
border: LightCoral 2px solid;
}
.overlay {
position: fixed;
top: 40px;
left: 160px;
width: 100px;
padding: 5px;
background: aliceblue;
border: solid 2px SlateBlue;
z-index: 999;
}
.overlay a:hover {
background: green;
cursor: pointer;
}
<div class="internal-scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
<div class="overlay">
<a>hover me, where the scrollbar is</a>
</div>
I've searched few hours, but cannot got an answer, So I need some help
There is a div element, provides scroll-x
<div id='parent'>
<div id='el1'></div>
<div id='el2'></div>
<div id='el3'></div>
</div>
When my mouse cursor locates on that div area, scrolling y does not work
Had tried =>
#id overflow: auto
#id overflow-x: auto, overflow-y: auto
#id overflow-x: scroll, overflow-y: scroll
How can I solve it?
Here, this can give you some idea:
#el1, #el2, #el3 {
width: 200px;
height: 200px;
background: lightblue;
display:inline-block;
}
.parent {
width:100px;
height:100px;
border: 2px dashed grey;
overflow: auto;
}
<div class="parent">
<div id='el1'>a</div>
<div id='el2'>b</div>
<div id='el3'>c</div>
</div>
I this snippet working the way you want?
The key is on setting the height and width of your parent and children elements.
A horizontal scroll (X-axis) can be achieved if the total width of the children's elements is bigger than the width of the parent element plus using overflow: auto to the parent element.
A vertical scroll (Y-axis) can be achieved if the total height of the children's elements is bigger than the height of the parent element plus using overflow: auto to the parent element.
Here is the working code: https://codesandbox.io/s/kind-gates-djhnx?file=/src/styles.css
html file:
<div id="parent">
<div id="child-1">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</div>
<div id="child-2">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</div>
<div id="child-3">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</div>
</div>
css file:
#parent {
overflow: auto;
height: 300px;
width: 300px;
background-color: gainsboro;
}
#child-1 {
overflow: auto;
width: 500px;
background-color: lightblue;
}
#child-2 {
overflow: auto;
width: 500px;
background-color: lightgreen;
}
#child-3 {
overflow: auto;
width: 500px;
background-color: lightcoral;
}
Here is a working example on overflow, you have to set height and width property in #parent plus you have to set overflow property to auto
if the width of any children is greater than parent's width, then it will automatically scroll on x direction
if the total height of all children is greater than parent's height, then it will automatically scroll on y direction
#parent{
background:#333;
width:300px;
height:300px;
overflow:auto;
}
#el1{
background:#999;
height:200px;
width:200px;
}
#el2{
background:green;
height:400px;
width:400px;
}
#el3{
background:yellow;
height:400px;
width:400px;
}
<div id='parent'>
<div id='el1'></div>
<div id='el2'></div>
<div id='el3'></div>
</div>
I'm trying to create a sidebar but I can't seem to make it sticky,
I need the totalWrapper (which includes the sidebar (red) and title ) to be sticky to the body AFTER we scroll past head
basically the black box should be sticky within the blue box, the blue box is the remaining height of the body
(the black and blue box are just added to explain the question and are legends i.e. not required in the actual code)
I feel like I'm making a rookie mistake.
can someone please explain what I'm doing wrong?
jsfiddle
* {
text-align: center;
}
html {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
position: relative;
}
#main {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50%;
background-color: white;
margin: auto;
}
#totalWrapper {
position: sticky;
top: 0;
}
#title {
width: 100%;
height: 50px;
background-color: green;
}
#optionsWrapper {
background-color: red;
position: relative;
height: 100vh;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">head</div>
<div id="main">
<div style="margin:5rem">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="totalWrapper">
<div id="title">title</div>
<div id="optionsWrapper">
option 1<br>
option 2<br>
option 3<br>
option 4<br>
</div>
</div>
</body>
</html>
Ok, I did a little “hack” which I do not like very much since it does not feels clean and elegant (I will continue thinking on it). It gets the job done, though. I change the order of the HTML elements since the sticky part needs to come before the main content. I also clean the CSS a little bit to get rid of unnecessary code for the example to work, that way it is also easier to follow.
body {
margin: 0;
text-align: center;
font-size: 18px;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
}
#stickyWrapper {
position: sticky;
height: 100vh;
top: 0;
}
#title {
height: 50px;
background-color: green;
}
#sidebar {
height: 100%;
width: 50%;
background-color: red;
}
#content {
margin-top: calc(-100vh + 50px);
/* =====> the negative height of the stickyWrapper
plus the positive height of the header */
margin-left: auto;
width: 50%;
}
<div id="header">head</div>
<div id="stickyWrapper">
<div id="title">title</div>
<div id="sidebar">
option 1<br> option 2<br> option 3<br> option 4<br>
</div>
</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</div>
https://jsfiddle.net/ry9gyb8n/
Hi guys , I have been trying to solve this problem since a couple of weeks.
I have an auto height container , the left div in the container is auto height as it can have various different content inside it.
The right div will always have an image but I dont know the height of the image.
How do I make it so the image doesnt exceed the height of the content on the left?
.container {
float: left;
width: 100%;
height: auto;
border: 2px solid black;
}
.leftContainer {
float: left;
width: 48%;
border: 2px solid black;
}
.rightContainer {
width: 50%;
float: left;
}
img {
max-width: 100%;
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
</div>
</div>
I would go with flex to create the layout and make the image out of the flow using absolute position so it won't give its container a height and thus the height will be equal to the left one. Then simply adjust the properties of the image to make it fit the container as you need:
.container {
display:flex;
border: 2px solid black;
}
.leftContainer {
flex:1;
border: 2px solid black;
}
.rightContainer {
flex:1;
position:relative;
}
img {
position:absolute;
top:0;
max-height:100%; /* Or height:100%*/
max-width:100%;
/*to center the image if needed*/
left:50%;
transform:translateX(-50%);
/**/
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
</div>
</div>
Another solution is to use the same layout as above and make the image as background. You will have the same situation because there is no content and thus the height will be the same as the left column. Then adjust the image position/size using background properties:
.container {
display: flex;
border: 2px solid black;
}
.leftContainer {
flex: 1;
border: 2px solid black;
}
.rightContainer {
flex: 1;
position: relative;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg");
background-size: contain; /* or cover or 100% 100% or auto*/
background-position: top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
</div>
</div>
I try to do this layout with CSS only (no JS, etc.), within an existing html page (do NOT change the HTML code). But couldn’t get all the positions I need. See if anyone has a better idea. Thanks in advance.
The existing HTML is like (class name is used to illustrate it):
<body-wrapper>
<logo>
</logo>
<nav>
</nav>
<content>
</content>
<footer>
</footer>
</body-wrapper>
The layout I want is like:
|--------------------|
| logo | |
|------| |
| Nav | |
| | content |
| | |
| | |
|------|-------------|
| footer |
|--------------------|
Or this:
|--------------------|
| logo | |
|------| |
| Nav | |
| | content |
| | |
| | |
| |-------------|
| | footer |
|--------------------|
Note: I wish NOT to change the HTML layout (don't add another div to wrap the log and nav bar, etc.), and only change the CSS to get the desired layout. Also, I don't know the height of these components.
The way I tried is to set the width for Logo and Nav, and use absolute (top = 0, right = 0) for the content. However, the footer will jump up to just below the Nav and overlap with the content. :-(
Any idea to get the desired layout?
Thanks
Did you try display: flex; flex-wrap: wrap; with order:# ?
jsfiddle: http://jsfiddle.net/n3frons4/3/
It should be the easiest way to create responsive website.
You can get some illustrations from Codrops http://tympanus.net/codrops/ or Bootstrap http://getbootstrap.com
You can try this one.
html
<div class="wrapper">
<div class="left">
<header class="logo">logo</header>
<nav class="nav">Nav</nav>
</div>
<div class="main-content">content</div>
<footer class="footer">footer</footer>
</div>
css
.wrapper {
width:100%;
max-width:800px;
margin: 0 auto;
}
.left {
width:30%;
float:left;
}
.logo {
width:100%;
height: 50px;
background:blue;
}
.nav {
width:100%;
height: 100px;
background: pink;
}
.main-content {
width:70%;
height:auto;
float:right;
}
.footer {
clear:both;
width:100%;
padding: 1em 0;
background:red;
}
Here is the jsfiddel link to visaulize it https://jsfiddle.net/wrLzv4cx/.
Hope this helps
try this
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.body-wrapper{
width:800px;
height:400px;
border:#000 2px dashed;
}
.div_left{
height:400px;
width:200px;
border-right:#000 2px dashed;
float:left;
}
.logo{
width:200px;
height:100px;
border-bottom:#000 2px dashed;
}
.nav{
width:200px;
height:300px;
}
.div_right{
width:590px;
height:400px;
float:right;
}
.content{
width:590px;
height:300px;
border-bottom:#000 2px dashed;
}
.footer{
width:590px;
height:100px;
}
</style>
</head>
<body>
<div class="body-wrapper">
<div class="div_left">
<div class="logo">
logo
</div>
<div class="nav">
nav
</div>
</div>
<div class="div_right">
<div class="content">
content
</div>
<div class="footer">
footer
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
output ->
Here are two examples that can give you something to work off of depending on if the img/nav need to be stationary or not. It's simply accounting for the relationship between each elements position. Fairly self explanatory it you take the time to break apart the CSS.
Example 1: Fixed Nav
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 50px;
min-height: 100%;
background: #266080;
color: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.logo {
position: fixed;
width: 150px;
height: 150px;
}
.nav {
position: fixed;
top: 150px;
bottom: 0;
width: 150px;
background: #2EA1C7;
}
.content {
top: 0;
margin-left: 150px;
height: 100%;
padding: 20px;
line-height: 30px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 150px;
padding: 20px;
background-color: #024D66;
text-align: center;
}
<div class="logo">
<img src="http://placehold.it/150x150/024D66/fff">
</div>
<nav class="nav"></nav>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with dypesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">Footer</div>
Example 2: Non-fixed Nav
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 50px;
min-height: 100%;
background: #266080;
color: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.logo {
position: absolute;
width: 150px;
height: 150px;
}
.nav {
position: absolute;
top: 150px;
bottom: 0;
width: 150px;
background: #2EA1C7;
}
.content {
top: 0;
margin-left: 150px;
height: 100%;
padding: 20px;
line-height: 30px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
padding: 20px;
background-color: #024D66;
text-align: center;
}
<div class="logo">
<img src="http://placehold.it/150x150/024D66/fff">
</div>
<nav class="nav"></nav>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with dypesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">Footer</div>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
display: table;
width: 100%;
}
.wrapper .col{
display: table-cell;
vertical-align: top;
}
.wrapper .col-1{
width: 200px;
background: #ddd;
}
.wrapper .col-2{
background: #ccc;
}
.logo{
height: 100px;
line-height: 100px;
background: #f7f7f7;
color: #555;
text-align: center;
display: block;
}
nav,
section{
min-height: 250px;
padding: 15px;
}
footer{
min-height: 100px;
background: #999;
padding: 15px;
}
<div class="wrapper">
<div class="col col-1">
<aside>
LOGO
<nav>nav</nav>
</aside>
</div>
<div class="col col-2">
<section>content</section>
<footer>footer</footer>
</div>
</div>
Fiddle