I created a few div and gave some colours to it in order to see the difference on changes as I code and see that there is a big white spacing between each box.
How can I remove these white spaces?
Here my fiddle: https://jsfiddle.net/Wosley_Alarico/8tgLzjeq/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul>
<li><a id="deposit" href="#">Deposit</a></li>
<li><a id="account" href="#">Account</a></li>
<li><a id="credit" href="#">Credit</a></li>
</ul>
<div class="box deposit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box account">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
<div class="box credit">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
</div>
</div>
<div id="random">
<p>This is a random text</p>
</div>
CSS:
li{
list-style:none;
color: white;
width: 30%;
a{
color: white;
text-decoration: none;
&:hover{
color: blue;
}
}
}
ul{
background: black;
padding: 20px 0;
text-align: center;
display: flex;
justify-content: center;
}
.box{
height: 200px;
}
.deposit{
background-color: green;
}
.account{
background: pink;
}
.credit{
background: blue;
}
li a.active{
color: red;
}
Hope you can help
remove the p margins and replace them with paddings if needed: p{margin:0;}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I try to create a simple layout using display:inline-block
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
But it gives unexpected results have a look at the Screenshot. Please guide me on why is that. Is there something wrong with my code or am I missing some hidden concept behind display:inline-block?
You just need to add vertical-align: top; on your .box element.
Here's the example, with the code you had provided:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
vertical-align: top; // here's the magic
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
For a better approach, I suggest you to wrap all the .box elements on a parent element .boxes-container and use display: flex and flex-wrap: wrap on this new parent element.
Here's the solution for the second case:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.boxes_container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="boxes_container">
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
</div>
You can use inline-flex instead of inline-block. It works.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-flex;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
Along with display:inline-block you may like to use vertical-align property. In your case:
.box {
display: inline-block;
}
Try to add float:left; to .box
Footer is on right place but the columns in section are overlapping the footer
.columns {
float:left;
width: 22%;
height: 30%;
margin-left:8%;
}
Instead of float:left; I have used display:inline-block; but issue
not resolved this problem is occurring when website displayed on
mobile. When viewed on desktop it's working fine.
Try adding this to your CSS
box-sizing: border-box;
.container {
background: #f4f4f4;
padding: 5%;
margin: 5%;
}
.column1 {
background: #b40404;
padding: 5%;
color: #fff;
}
.column2 {
background: #000;
padding: 5%;
color: #fff;
}
.column3 {
background: #b40404;
padding: 5%;
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="column1">
This is column 1<br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus vero labore obcaecati illum reprehenderit incidunt consequatur quidem, id repellendus impedit, quaerat, mollitia ea culpa sint? Totam sunt omnis quis
eaque.
</div>
</div>
<div class="col-md-4">
<div class="column2">
This is column 2<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium mollitia, incidunt accusantium iure eius suscipit fugit tempore veniam deleniti, nulla dolore repudiandae voluptas, eaque architecto ratione recusandae
consectetur officia. Saepe.
</div>
</div>
<div class="col-md-4">
<div class="column3">
This is column 3<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis vitae nulla, beatae tenetur ea eaque obcaecati perspiciatis, architecto nemo culpa id non facilis distinctio aliquam. Accusamus voluptatum mollitia perferendis
libero.
</div>
</div>
</div>
</div>
you can use Bootstrap. Use the class container then row and define columns inside it. Like this:
With standard behavior of overflow: scroll the padding-bottom is in the bottom of the scrolled block. But how can I make padding-bottom fixed, so odd text will not appear right after bottom border
https://jsfiddle.net/nvg23rp8/6/
body{
background-color: green;
}
.wrapper{
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: scroll;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.inner{
background: blue;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
CSS is all about illusions!
Make an outer container and give it some padding to give the required illusion. I couldn't get your Fiddle, so I made a new one. Here you go: https://jsfiddle.net/z9ztcstb/
.container {
position: relative;
}
.text-container {
background: red;
padding: 10px;
}
.text {
height: 100px;
/* background: green; */
overflow: scroll;
}
<div class="container">
<div class="text-container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In
quae earum recusandae beatae, optio. Incidunt velit corporis nesciunt, soluta dolor laborum eius recusandae perspiciatis. Est alias minima hic iure, incidunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam alias suscipit, quia, vitae consectetur laudantium nisi itaque odio aliquam dolorem voluptas atque, eos perspiciatis. Excepturi cumque doloribus ad, itaque tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat saepe possimus fuga consequuntur, dolorum facere harum, ullam id similique tempora magni non dolores. Praesentium esse omnis quia eaque quos!
</div>
</div>
</div>
I would suggest that you put the scroll on the inner box, this would be the most effective way of preventing unwanted overflow of text below the blue background. You could do this without the 'inner' css. Try this out. fiddle here
Hope this helps
$('.wrapper').on('scroll', function() {
$('.inner').scrollTop($(this).scrollTop());
});
body {
background-color: green;
}
.wrapper {
height: 100px;
width: 300px;
background: transparent;
border: 1px solid #000;
padding-bottom: 30px;
position: fixed;
left: 10%;
top: 10%;
}
.middle {
margin: 20px;
padding: 2px 5px;
height: 90%;
overflow-y: scroll;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
this will work:
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
</div>
<div class="border">
</div>
</div>
div.wrapper {
width:340px;
height:120px;
background-color:#ccc;
overflow:auto;
position:relative;
}
div.border {
border:solid 10px red;
height:100px;
position:fixed;
width:300px;
height:100px;
top:0;
left:0;
}
div.content{
z-index:1;
margin:10px;
}
The main point is to put the border outside of the .wrapper container.
The only issue I can see here is you cannot use mouse wheel to scroll .content inside .wrapper, since it has been overlapped by .border
Here is a JSFiddle link you can see: https://jsfiddle.net/zsydyc/pw9jz5s2/3/
I think this might be helpful.
body{
background-color: green;
}
.wrapper{
height: 140px;
width: 300px;
background: transparent;
border: 1px solid #000;
position: fixed;
left: 10%;
top: 10%;
}
.middle{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
height: 100px;
}
.inner{
background: blue;
overflow-y: scroll;
height: 100%;
}
::-webkit-scrollbar {
width: .5rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background: #f00;
border-radius:.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="middle">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, atque asperiores incidunt aspernatur libero commodi? Quas aspernatur ducimus minima rerum eum veniam, tempora, numquam, fugiat veritatis ea, nemo error totam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed perspiciatis, nam nulla optio repellendus ratione, at! Ut reiciendis, laboriosam a in soluta odit impedit, quia magnam esse, maxime autem suscipit.
</div>
</div>
</div>
How can I create top navbar with logo on the left and nav on the right. When i use flexbox or display-inline-block it doesn't work.
<header id="header" class="header">
<a class="logo" href="" title="">Essembli.</a>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header><!-- /header -->
My CSS:
.header {
position: fixed;
.logo {
float: left;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
}
}
You can get it by using following approach
I posted it in css not scss.
If you check fiddle it will more clear you that to how to get it.
Fiddle
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
background: tomato;
padding: 5px;
}
.logo {
flex: 1 0 0;
}
.navigation {
flex: 1 0 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.navigation ul {
display: flex;
width: 100%;
justify-content: space-between;
}
.content {
margin-top: 30px;
}
<header id="header" class="header">
<div class="logo">
LOGO
</div>
<div class="navigation">
<ul>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
<li>NAV</li>
</ul>
</div>
</header>
<!-- /header -->
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur error excepturi optio quas delectus ea dolorum quam similique, architecto tempora adipisci eveniet atque esse doloribus aperiam! Facere cumque optio atque!
</div>
You need to apply that display: inline-block; to .top-nav since nav is a block element by default.
Added red/green background color to show you the block size, instead of using float, just use a div to wrap the logo
https://jsfiddle.net/dalinhuang/hfhjtp2y/
SCSS:
.header {
position: fixed;
background: green;
.logowrapper {
display: inline-block;
}
.top-nav {
.site-nav {
display: inline-block;
li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
}
display: inline-block;
background: red;
}
}
.header {
position: fixed;
background: green;
}
.header .top-nav {
display: inline-block;
background: red;
}
.header .top-nav .site-nav {
display: inline-block;
}
.header .top-nav .site-nav li {
display: inline-block;
list-style-type: none;
margin-right: 15px;
}
.logowrapper {
display: inline-block;
}
<header id="header" class="header">
<div class="logowrapper"><a class="logo" href="" title="">Essembli.</a></div>
<nav class="top-nav">
<ul class="site-nav">
<li>O nas</li>
<li>Zespół</li>
<li>Kompetencje</li>
<li>Zarząd</li>
<li>Kariera</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<!-- /header -->
I have a div section (#section1) that I want to remain 100% height, but to expand if need be to fit other content. The width is 100%. I have another div below that one as you scroll down the page (#section2), same principle 100% height and width, with the height expanding as needed. My problem is, the second one won't push all the way down, due to the first div being absolute. Instead it is has the first section on top of it. Does anyone have any advice? I'm using Bootstrap 4 for this project.
header {
line-height: 100px;
height: 100px;
width: 100%;
background: #f3f3f3;
position: fixed;
top: 0;
z-index: 2;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
height: 100%;
}
body {
background: none;
height: 100%;
}
p {
font-size: 20px;
margin: 0;
}
#section1 {
padding: 0;
margin: 0;
background-color: #292929;
margin: 0 auto;
min-height: 100%;
width: 100%;
position: absolute;
}
#section2 {
padding: 0;
margin: 0;
background-color: red;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
#section2 p {
background-color: inherit;
max-width: 600px;
margin: 0 auto;
}
#section2 a {
background-color: #2eb233;
color: #ffffff;
font-weight: 700;
font-size: 20px;
padding: 15px 40px;
}
#section2 a:hover {
text-decoration: none;
background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>
<!--Section 1-->
<div id="section1">
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6">
<div id="quote-section">
<h1>What our customers <br> have to say...</h1>
<div id="quote-box">
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
</p>
<p id="quote-location">(Location)</p>
</div>
<a class="call-to-action" href="#">Find A Location</a>
<div id="border-section-off"></div>
<a class="call-to-action" href="#">Order Our Home Study Course</a>
</div>
</div>
</div>
</div>
</div>
<!--Section 2-->
<div id="section2">
<h1>Who We Are...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>
Why you need section 1 to be absolute, if you remove that attribute everything will work fine run this code below:
header {
line-height: 100px;
height: 100px;
width: 100%;
background: #f3f3f3;
position: fixed;
top: 0;
z-index: 2;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
height: 100%;
}
body {
background: none;
height: 100%;
}
p {
font-size: 20px;
margin: 0;
}
#section1 {
padding: 0;
margin: 0;
background-color: #292929;
margin: 0 auto;
min-height: 100%;
width: 100%;
//position: absolute;
}
#section2 {
padding: 0;
margin: 0;
background-color: red;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
#section2 p {
background-color: inherit;
max-width: 600px;
margin: 0 auto;
}
#section2 a {
background-color: #2eb233;
color: #ffffff;
font-weight: 700;
font-size: 20px;
padding: 15px 40px;
}
#section2 a:hover {
text-decoration: none;
background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>
<!--Section 1-->
<div id="section1">
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6">
<div id="quote-section">
<h1>What our customers <br> have to say...</h1>
<div id="quote-box">
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
</p>
<p id="quote-location">(Location)</p>
</div>
<a class="call-to-action" href="#">Find A Location</a>
<div id="border-section-off"></div>
<a class="call-to-action" href="#">Order Our Home Study Course</a>
</div>
</div>
</div>
</div>
</div>
<!--Section 2-->
<div id="section2">
<h1>Who We Are...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>
Depending on which browsers you need to support, you could ditch position absolute and min-height from the sections and use:
height: 100vh;
Which would set the sections to 100% of the browser viewport's height.
It's a fairly recent addition though, so check http://caniuse.com/viewport-units/