My bootstrap 4 footer rises up on pages where the body has less content.
Below is an image of the problem.
footerproblem
footer {
background-color: white;
color: #d5d5d5;
padding-top: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
color: black;
}
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-6">
<p class="marker">blah blah blah.
<a class="btn btn-social-icon btn-instagram">
<span class="fa fa-instagram"></span>
</a>
</div>
<div class="col-md-6">
<p class="marker">more blah blah.
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© app.com</h5>
</div>
</div>
</div>
If there is anything else I have forgot to attach please let me know and I will edit the post.
I have played around with footer: sticky; / fixed; but that does not solve the problem.
The footer is also too tall but whenever I have added in a height css variable, the height is reduced however the text stays in place.
funkyheight
Thank you very much for your help.
The proper way to fix this problem is to layout your page as follows:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
with the following CSS:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
This works with or without Bootstrap, but if you're not using Bootstrap you probably also want
* { box-sizing: border-box; }
(which is already included in Bootstrap).
Here's an example, using Bootstrap v4:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
background-color: #eee;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Elementum eu facilisis sed odio morbi quis commodo odio. Tempus egestas sed sed risus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eu ultrices vitae auctor eu augue ut. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. In pellentesque massa placerat duis. Bibendum enim facilisis gravida neque convallis.
<p>Nisi vitae suscipit tellus mauris a. Non blandit massa enim nec dui nunc. Hac habitasse platea dictumst vestibulum rhoncus. Vitae congue mauris rhoncus aenean vel. In fermentum et sollicitudin ac orci phasellus egestas. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc mattis enim ut tellus. Ultrices dui sapien eget mi proin sed libero. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Sodales ut eu sem integer vitae justo eget magna. Pellentesque id nibh tortor id aliquet. Sed pulvinar proin gravida hendrerit lectus a.
<p>Sed velit dignissim sodales ut eu sem integer. Senectus et netus et malesuada fames ac. Arcu non sodales neque sodales ut etiam sit amet nisl. Velit scelerisque in dictum non. Integer eget aliquet nibh praesent tristique. Dictumst quisque sagittis purus sit. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit egestas dui id ornare arcu odio ut sem. Nec dui nunc mattis enim ut tellus elementum sagittis. Nulla facilisi cras fermentum odio. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Magna eget est lorem ipsum. Vitae tortor condimentum lacinia quis vel eros donec ac. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Mollis nunc sed id semper risus in. Id nibh tortor id aliquet lectus proin. Netus et malesuada fames ac.
</div>
<div class="col">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus egestas. Leo integer malesuada nunc vel risus commodo viverra maecenas. Amet cursus sit amet dictum sit amet. In hac habitasse platea dictumst quisque sagittis purus sit amet. Congue mauris rhoncus aenean vel. Imperdiet proin fermentum leo vel orci porta non. Velit dignissim sodales ut eu. Mauris a diam maecenas sed enim ut sem viverra aliquet. Morbi non arcu risus quis varius quam quisque. Blandit aliquam etiam erat velit scelerisque in. Convallis aenean et tortor at risus viverra adipiscing at in. In hac habitasse platea dictumst vestibulum. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
<p>Non sodales neque sodales ut etiam sit amet. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Lectus proin nibh nisl condimentum id venenatis a. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Libero id faucibus nisl tincidunt. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Maecenas accumsan lacus vel facilisis volutpat. Bibendum arcu vitae elementum curabitur vitae. Id porta nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel. Purus in mollis nunc sed id semper risus in hendrerit. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Eget nunc lobortis mattis aliquam. Suspendisse in est ante in nibh mauris cursus mattis. Nibh mauris cursus mattis molestie a iaculis. Eget dolor morbi non arcu risus quis varius quam quisque. Volutpat maecenas volutpat blandit aliquam etiam erat velit.
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
You can use clearfix.
Just add it as class - effectively what it does is this:
.clearfix::after {
display: block;
clear: both;
content: "";
}
Related
Using Bootstrap 5, I've got a sticky nav, which works as expected, but I need to display a hanging div (.chat-tag) directly underneath the sticky nav for a chat feature. This "hanging tag" should remain attached to the sticky nav when the user scrolls down the page.
It seems to display properly at widths of 992 and below, but for desktop, it appears in the same row as the top navigation.
Here's what I have so far, which I've also posted to Codepen:
https://codepen.io/Codewalker/pen/vYRoXdB?editors=1100
nav {
background-color: red;
height: 48px;
position: sticky;
top: 0;
}
.main-nav {
display: -webkit-flex;
display: inline-flex;
-webkit-justify-content: center;
}
.masthead-fluid {
background-color: #F7CAC9;
}
.masthead {
height: 60vh;
display: inline-flex;
align-items: center;
}
.chat-tag {
background-color: #B565A7;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
<div class="container-fluid">
<div class="nav-wrapper text-center">
<nav class="main-nav navbar navbar-expand-lg bg-white">
<div class="container-fluid text">
<a class="navbar-brand" href="#">
LOGO
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#what">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#registry">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</div>
<div class="chat-tag">Chat with us</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid masthead-fluid mb-5">
<div class="row">
<div class="col-12">
<div class="color-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-12 masthead">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
nulla facilisi nullam vehicula ipsum.</p>
<p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>
<p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>
<p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>
<p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
This is a rare case where I'd resort to absolute positioning rather than trying to dance with flexbox.
.chat-tag {
position: absolute; /* <------------- HERE */
top: 100%; /* <------------------ AND HERE */
background-color: rgba(181, 101, 167, 0.5); /* for fun | #B565A7 */
transition: all 0.3s; /* for fun */
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 200px;
}
.chat-tag:hover {
background-color: rgba(181, 101, 167, 1); /* for fun */
}
nav {
background-color: red;
height: 48px;
position: sticky;
top: 0;
}
.main-nav {
display: inline-flex;
}
.masthead-fluid {
background-color: #F7CAC9;
}
.masthead {
height: 60vh;
display: inline-flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
<div class="container-fluid">
<div class="nav-wrapper text-center">
<nav class="main-nav navbar navbar-expand-lg bg-white">
<div class="container-fluid text">
<a class="navbar-brand" href="#">
LOGO
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#what">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#registry">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</div>
<div class="chat-tag">Chat with us</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid masthead-fluid mb-5">
<div class="row">
<div class="col-12">
<div class="color-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-12 masthead">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
nulla facilisi nullam vehicula ipsum.</p>
<p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>
<p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>
<p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>
<p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
I wanted to align button and Image vertically in center, right now button is showing on top of line, I am using bootstrap, can anyone help?
<div class="col-md-12">
<div class="col-md-5" style="margin-left: -37px;"><p class="imageSveMsg" style="display:none">Save</p><button style="display:none" fieldid="81" class="saveimgbtn fileUpload btn btn-primary">Save Image</button>
<div class="fileUpload hideFileUpload btn btn-primary"> <span class="chooseimagetext"><b>Change Image</b></span><input rowid="submission_81" id="uploadImage" onchange="PreviewImage();" tabindex="13" type="file" name="matrix_submission_data81" accept="image/png, image/jpeg , image/jpeg" class="upload matrix_submission_draft ">
</div></div>
<div class="col-md-4">
<input type="hidden" name="oldmatrix_submission_data81" value="16440505543.png"><img id="uploadPreview" src="https://staging-reconresearchlive.kinsta.cloud/wp-content/plugins/matrix-engine/includes/submission_images/16440505543.png" width="50px !important;" height="50px !important;" style="margin-left:30px;max-width: 200px;max-height: 100px;min-height: 100px;vertical-align: middle !important;"></div></div>
css:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: #E2A169 !important;
border-color: #E2A169 !important;
}
img{
margin-left: 30px;
max-width: 200px;
max-height: 100px;
min-height: 100px;
vertical-align: middle !important;
}
Output:
Current Output Image
Try Changing the first div elements class to <div class="row align-items-center"> instead of <div class="col-md-12">
You can use align-items: center
Please check fiddle
https://jsfiddle.net/zc5axdnr/1/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row" style="align-items: center;">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem eu leo interdum mollis at quis ligula. Sed pharetra ante metus, sed fermentum diam efficitur vitae. Pellentesque ac porttitor nunc. Mauris lacus quam, facilisis sed congue vulputate, aliquam nec nibh. Maecenas et nulla lacus. Fusce commodo egestas mauris, ut viverra sapien cursus id. Morbi cursus tristique posuere. Pellentesque tincidunt nulla id commodo fermentum. Phasellus sit amet imperdiet orci, eget cursus ipsum. Duis quis metus nunc. Curabitur ex ipsum, suscipit non erat sit amet, lacinia pharetra mi.
Ut vel velit ante. Duis facilisis nisi in sapien posuere gravida. Proin mollis nibh tellus, vitae sodales purus tincidunt eget. Praesent a ullamcorper justo. Integer mollis porttitor sem. Pellentesque vulputate et justo eget blandit. Praesent non lacus mauris. Nam urna ligula, interdum egestas dictum quis, hendrerit pulvinar lorem. Quisque varius eros felis, a dapibus leo consequat eget. Nulla laoreet eros dui, laoreet laoreet libero cursus ullamcorper. Suspendisse hendrerit consequat purus, vel tincidunt risus blandit sed. Nulla mattis laoreet urna quis blandit. Donec et odio facilisis metus congue dictum rhoncus eget turpis. Suspendisse aliquet sit amet ligula quis pellentesque. Cras ullamcorper nec magna id aliquam.
</div>
<div class="col-6 align-items-center">
<button class="btn btn-primary">
Button
</button>
</div>
</div>
</div>
</body>
</html>
So I already tried Google for this problem, but couldn't find a solution. I'm currently trying to divide my page in to 50% columns. The left column should contain an image and a form, the right one a text description (with a variable size).
I want the sections of the first column, to not be affected by the ones in the second one, so the same logic as column-count would use. If I use grid-template-columns: 50% 50%; to create my columns and I adjust the browser window, the text in the right column gets longer and pushes down the form under the image, which creates a blank space.
Is there any way using grid-template-columns and not having the content of both related to each other, so there are only two columns and the spacing between each item just stays the same when resizing the browser window?
Forgot to mention that when the browser window gets resized, two columns should merge to one and the order of the sections should be image, text, form. Is there a way to adapt the order when resized?
CSS code used:
.grid-custom{
padding-left: $grid-gutter;
display: grid;
grid-template-columns: 50% 50%;
grid-gap: $grid-gutter;
#include media-query($small) {
padding-left: $grid-gutter-mobile;
grid-gap: $grid-gutter-mobile;
grid-template-columns: 100%;
}
}
HTML does not have to be large to display the concept.
Consider this:
* { box-sizing: border-box; }
.layout-wrap {
display: flex;
min-height: calc(1px + 40vw);
}
.div1 { margin-right: 0.5em; }
.div1, .div2 { width: 50%; border: 4px solid black; }
<div class="layout-wrap">
<div class="div1"> <h1>IMAGE & FORM</h1> </div>
<div class="div2"> <h1>TEXT</h1> </div>
</div>
Using flex you can achieve this. Please refer snippet below for css part.
.container{
display: flex;
}
.col1{
background: blue;
width: 100%;
}
.col2{
background: red;
width: 100%;
}
.form{
width: 100px;
}
<div class="container">
<div class="col1">
<img src="data:image/jpeg;base64,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">
<div class="form">
Name: <input type="text"><br>
Class: <input type="text"><br>
Roll No: <input type="text">
</div>
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel odio non felis consectetur consectetur ut in felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis cursus metus. Nulla ligula purus, pellentesque eu dignissim fermentum, finibus nec mi. Curabitur sapien ex, dignissim eu accumsan sollicitudin, semper sed risus. Mauris pulvinar nisi quis semper interdum. Ut eu hendrerit felis, a gravida neque. Donec tincidunt quam et justo tincidunt tincidunt. Donec in quam tempus, tempus erat vel, fringilla lectus. Nullam iaculis non ipsum sodales varius. Etiam sagittis egestas orci non aliquet. Sed venenatis sodales sem, ut ultrices lacus dapibus quis. Curabitur volutpat libero eget volutpat ornare. Phasellus condimentum laoreet risus ultrices vulputate. Vestibulum dignissim ipsum et leo interdum varius. Maecenas vehicula enim id massa tincidunt scelerisque.
Sed diam nisi, aliquet eu massa non, tempor vehicula libero. Nam nec bibendum augue, nec eleifend orci. Quisque efficitur volutpat dui id semper. Duis ac mi leo. Donec eget suscipit ex, suscipit finibus nulla. Sed convallis enim vel lorem porttitor tincidunt. Etiam convallis facilisis urna. Nullam viverra tempor metus, ac pellentesque massa sodales sit amet. Maecenas sed consequat elit, ut volutpat arcu. Nam dui mi, vestibulum ut enim id, fermentum tempor lorem. Nunc eleifend, magna lobortis blandit pulvinar, justo tellus placerat lorem, in venenatis augue velit vel neque.
Donec fermentum cursus urna ut mattis. Fusce tincidunt augue volutpat, molestie dolor ac, vehicula dolor. Duis ante orci, pulvinar sit amet tincidunt volutpat, malesuada et urna. Suspendisse at hendrerit neque. Nullam vel varius tellus. Morbi sed sapien at nisl consequat interdum. Mauris quis odio id nulla suscipit feugiat sit amet et leo. Vivamus viverra pellentesque ligula at aliquam. Sed quis massa ullamcorper, ullamcorper turpis quis, tempus lorem. Sed quis nunc fermentum, commodo ante et, pulvinar tortor. Donec tincidunt sagittis nibh nec consectetur. Proin facilisis pretium mi, vitae pharetra neque sollicitudin at. Etiam condimentum odio id tortor finibus, eget porttitor mi aliquam. Vestibulum vulputate tincidunt tortor nec volutpat. Phasellus ut est risus. Sed convallis quis libero id congue.
Sed tempus, dui a sodales ullamcorper, lorem nunc varius lectus, nec sollicitudin mi leo eu mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis porttitor ante. Donec tincidunt molestie nunc posuere maximus. Praesent rhoncus cursus sem. Sed vitae vulputate urna. Morbi nec purus sit amet enim pharetra eleifend at eget nisi. Aliquam feugiat sodales massa, ut aliquet magna. Mauris justo metus, mollis ac porta ut, molestie hendrerit dolor. Mauris sed est interdum, feugiat eros eu, vehicula odio.
Vivamus lorem nibh, accumsan eget nibh efficitur, aliquam volutpat metus. Sed id dolor eget nisi ultricies tempor et blandit lectus. Fusce id ipsum at est congue ultrices. Sed id rutrum mi. Suspendisse semper justo ac metus finibus, vitae accumsan leo sagittis. Aliquam quis elit dolor. Morbi et tellus venenatis, imperdiet elit ac, semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ullamcorper porta lectus, in ullamcorper eros scelerisque ut. Sed id odio sit amet dolor vulputate finibus vel non dolor. Praesent orci lorem, porta sit amet turpis molestie, volutpat vestibulum felis. Phasellus non orci aliquet, vulputate risus in, tempor mi.
</div>
</div>
No need to use any CSS for 50%-50% screen or media query if u use this
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="border col-sm-6">
<div>
<img src="sample.jpg">
</div>
<div>
<h2>Contact us</h2>
<form >
First name:
<input type="text" name="firstname">
<br><br>
Last name:
<input type="text" name="lastname" >
<br><br>
Email ID:
<input type="email" name="email" >
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="border col-sm-6">
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</div>
</div>
</div>
</body>
</html>
here is the problem
I have multiple divs that I want to be the height of the screen.
I achieved that but my problem now is that my div don't stop resizing even if my content is bigger than the div. The example speaks for itself
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<div class="h-100">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 1
</div>
</div>
</div>
<div id="photos" class="h-100">
<div class="custom-container h-100 justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact" class="h-100">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
</div>
as you should see on small snippet's small window the text is out of bound so what I would like to achieve is a div of full height when content is smaller or equal to full height and if the content is larger than full height then my div should automatically get size of content.
Is this possible to do that? Is the overall way I'm doing this is correct?
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100vh;
height: auto;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow-y: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
<div id="photos">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
I have changed the code, so that the div gets the height of the content, if it is larger than the screen height. Just change the height declaration of .custom-container to "auto" instead of "100%" and the min-height decaration to "100vh". You can remove the other h-100 classes in your code then.
Even though a div is a block element, its height is always the height of its content. If you want to have a full screen height (which means viewport height), you have to change 100% to 100vh (vh = viewport height).
Depending on your desired outcome you could do:
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
/// Add Overflow control
overflow-y: scroll;
}
I know this question is probably the same as some that has been asked, but I haven't found a solution yet.
I'm trying to create a site that has a side main navigation on the left and the content on the right.
I've been able to make the nav to be full height on the browser but if the content is bigger then the screen then the nav doesn't go all the way down.
I've created a codepen to show what I'm trying to say.
CODEPEN
My HTML
<!-- BEGIN MENU AREA -->
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- END MENU AREA -->
<!-- BEGIN CONTENT AREA -->
<div class="container content_wrapper">
<div class="row">
<div class="col-lg-12 banner_wrapper">
<div class="single-item">
<div>
<img src="img/banner6.jpg" alt="">
</div>
<div>
<img src="img/banner7.jpg" alt="">
</div>
<div>
<img src="img/banner8.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 services_wrapper">
<div class="col-lg-4 services">
<div>
<img src="img/cutting_and_styling.jpg">
<h1>Cutting & Styling</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/Chemical_service.jpg">
<h1>Chemical Service</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/hair_treatment.jpg">
<h1>Treatment</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 line">
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 home_content_area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique
molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse
aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit
faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
</p>
<p>
Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis
mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna
ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
</p>
<p>
In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor
lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis,
quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum
malesuada sem sed rhoncus. Cras vitae tincidunt velit.
</p>
<p>
Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus,
lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas
pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed
dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in,
faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan
nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non,
condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien.
Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim.
</p>
</div>
</div>
</div>
<!-- END CONTENT AREA -->
My css
body{
background-color: #4169E1;
background-image: url("../img/light-grey-floral-motif.png");
}
.container{
background: #ffffff none repeat scroll 0 0;
border-radius: 5px;
margin-left: 275px;
margin-top: 20px;
padding: 20px;
width: 970px;
}
.navbar-default {
height: 100%;
left: 0;
position: absolute;
top: 0;
background-image: url("../img/light-grey-floral-motif.png");
}
.navbar-brand {
float: none;
}
.navbar-nav {
/*margin-top: 60px;*/
text-align: center;
width: 100%;
}
.navbar-nav li {
display: block;
float: none;
}
.webkrunch {
bottom: 0;
color: #ffffff;
position: absolute;
}
.webkrunch a img {
margin-left: 40px;
}
.services img {
width: 100%;
}
.banner_wrapper img {
width: 100%;
}
.banner_wrapper {
margin-bottom: 20px;
}
.gallery_image > img {
width: 100%;
}
.services_wrapper h1 {
font-family: Gabriela;
font-size: 26px;
}
.services div {
background: #d6eaf8 none repeat scroll 0 0;
}
.services_wrapper {
text-align: center;
}
.services_wrapper p {
padding: 0 20px 15px;
}
.line hr {
border-color: #333;
border-width: 2px;
width: 80%;
}
.home_content_area {
text-align: center;
}
.services {
padding-left: 0;
}
.services:last-child {
padding: 0;
}
.about_content_area h1 {
font-family: Gabriela;
margin-top: 0;
text-decoration: underline;
}
.gallery_title h2 {
font-family: Gabriela;
}
.gallery_title {
color: #333;
padding-bottom: 1px;
text-align: center;
vertical-align: middle;
}
.gallery_category {
background: #d6eaf8;
}
.gallery_area h1 {
font-family: Gabriela;
}
.gallery_items img {
margin-bottom: 10px;
margin-right: 10px;
}
.pricing_table tr:first-child {
font-weight: bold;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #d6eaf8;
}
table.pricing_table tr td:first-child {
font-weight: bold;
}
You need to add position:fixed; CSS to your navbar. It will be fixed in the browser window and will not scroll.
DEMO
Try position: fixed instead of absolute.
A fixed element is positioned relative to the viewport, it will always stay in the same place (even if the page is scrolled).
Example
The solution to my answer was to change absolute to fixed. The answer came from both #NarenMurali and #James.
Thanks for helping me.
add overall section for both navbar and container and then add this css, sorry i don't have codepen login
.navbar{
padding-bottom:1000px;
margin-bottom:-1000px;
}
.overall{
overflow:hidden;
}
<!-- BEGIN MENU AREA -->
<section class="overall">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- END MENU AREA -->
<!-- BEGIN CONTENT AREA -->
<div class="container content_wrapper">
<div class="row">
<div class="col-lg-12 banner_wrapper">
<div class="single-item">
<div>
<img src="img/banner6.jpg" alt="">
</div>
<div>
<img src="img/banner7.jpg" alt="">
</div>
<div>
<img src="img/banner8.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 services_wrapper">
<div class="col-lg-4 services">
<div>
<img src="img/cutting_and_styling.jpg">
<h1>Cutting & Styling</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/Chemical_service.jpg">
<h1>Chemical Service</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
<div class="col-lg-4 services">
<div>
<img src="img/hair_treatment.jpg">
<h1>Treatment</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna aliquet, vulputate orci nec, mattis sem.
Donec sollicitudin sed nibh ut rutrum. Sed tincidunt libero vitae quam lacinia, eget condimentum sem euismod.
Maecenas condimentum felis eu urna sagittis, ut mollis elit luctus. Mauris nibh orci, sodales et malesuada vitae,
suscipit et metus. Praesent non porttitor lorem, at pretium eros.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 line">
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 home_content_area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi eros, porta rutrum lacinia quis, tristique
molestie dui. Fusce interdum cursus eros, quis tincidunt mi. In vel neque non metus aliquet malesuada. Suspendisse
aliquet purus ac justo cursus dictum. Donec viverra sapien sit amet ligula pretium aliquet. Curabitur suscipit
faucibus purus quis luctus. Pellentesque congue vestibulum interdum. Sed in laoreet turpis, eu condimentum elit.
</p>
<p>
Aenean ipsum ex, gravida non auctor nec, interdum non nulla. Nullam vehicula felis id lacus ullamcorper, eu mollis
mi pulvinar. In at libero nunc. Aliquam a lectus ac quam consequat egestas. Etiam a accumsan diam. Donec sed urna
ut nunc placerat ultrices. Vestibulum ac blandit mauris, quis ultricies justo. Quisque semper mattis purus eu aliquet.
</p>
<p>
In tincidunt malesuada leo, euismod ornare magna mattis a. Aenean fringilla eros ut enim dictum, dapibus porttitor
lectus egestas. Vestibulum ut erat bibendum, laoreet lacus eu, molestie est. Proin bibendum mauris et felis lobortis,
quis consequat libero tincidunt. Donec leo ligula, porttitor ut auctor vel, malesuada et nisl. Donec condimentum
malesuada sem sed rhoncus. Cras vitae tincidunt velit.
</p>
<p>
Mauris maximus ultricies ullamcorper. Praesent auctor euismod dignissim. Donec finibus, leo ut dictum tempus,
lacus sem aliquet ligula, sed ornare nibh neque eleifend elit. Pellentesque semper convallis odio. Maecenas
pharetra iaculis lacus sed ultricies. Sed id sapien aliquet lectus sagittis semper. Etiam ultrices odio sed
dolor dictum commodo. Donec condimentum ac nisl eget vestibulum. Integer velit risus, interdum eget molestie in,
faucibus ut magna. In imperdiet nisi erat, ut vehicula eros volutpat eget. Aliquam at lorem lacinia, accumsan
nunc vitae, sollicitudin velit. Ut at dapibus dolor, ac ornare eros. Etiam dui sem, mollis eget lacus non,
condimentum maximus lectus. Etiam eros sapien, ultricies scelerisque pellentesque eget, viverra a sapien.
Quisque tincidunt ante accumsan blandit ultrices. Maecenas blandit facilisis dignissim.
</p>
</div>
</div>
</div>
</section>
<!-- END CONTENT AREA -->