I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>
We just had to add the z-index: 1; to the footer.
Related
How would I align items in a sidebar like this:
See image
my main problems are the formatting for the footer being fixed to the bottom and the main sidebar container overflowing and scrolling but still being between the sidebar header and the sidebar bottom element text container, so not overlapping either while having that element be scrollable without the whole sidebar scrolling
what i have so far:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
<!-- <div class="col bg-primary">
test
</div>
<div class="col bg-danger">
test 2
</div>
<div class="col bg-primary" style="position: fixed; bottom: 0;">
test 3
</div> -->
<div class="d-flex flex-column justify-content-start mb-3">
<div class="p-2 bg-primary">
Flex item 1
</div>
<div class="p-2 bg-danger flex-grow-1">
Flex item 2
</div>
<div class="p-2 bg-primary" style="position:fixed; bottom:0;">
Flex item 3
</div>
</div>
</div>
<div class="col bg-secondary text-white">
main body
</div>
</div>
<!-- <div class="row">
<div class="col bg-secondary text-white">
main body
</div>
</div> -->
</div>
using bootstrap 5.3.0 alpha1
Here's a minimal example of how to create a full page layout with a container that should scroll on overflow using Bootstrap V5.3.
Read the docs if you like to learn how it works.
Read about flex-grow-1 or if you're new to flex start here.
Learn how overflow works.
nav {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}
main {
background: lightyellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0">
<nav class="col-4 p-2 d-flex flex-column gap-1">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
If <main> should also overflow:scroll at 100vh.
Add in CSS:
main {
height: 100vh;
max-height: 100vh;
}
and in HTML:
<main class="col overflow-auto">
If <main> can grow beyond the viewport height and you want <nav> to grow along with it.
You could wrap the content inside col-4 in an absolute positioned container that fills col-4 and therefore let it grow beyond 100vh height while keeping the overflow scroll if <main> is smaller, for example:
nav {
min-height: 100vh;
background: lightgreen;
}
nav #overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
main {
background: lightyellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0">
<nav class="col-4 position-relative">
<div class="p-2 d-flex flex-column gap-1" id="overflow-container">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
If <nav> and <main> should stack vertically at a smaller screen size.
In the HTML make .row a flex-column by default and a flex row on the medium breakpoint with flex-md-row. Then change col-4 to col-md-4.
In the CSS add a media query, using Bootstrap's medium breakpoint width.
Note: Snippet below is based on the example above with an absolute positioned container, but the same logic can also be applied to the other examples.
nav {
min-height: 100vh;
background: lightgreen;
}
main {
background: lightyellow;
}
#media (min-width: 768px) {
nav #overflow-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid px-0">
<div class="row gx-0 flex-column flex-md-row">
<nav class="col-md-4 position-relative">
<div class="p-2 d-flex flex-column gap-1" id="overflow-container">
<div class="">
<h5>
Sidebar header
</h5>
</div>
<div class="">
Some content
</div>
<div class="">
Some other content
</div>
<div class="flex-grow-1 overflow-auto">
sidebar scroll
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> end sidebar scroll
</div>
<div class="">
Sidebar footer
</div>
</div>
</nav>
<main class="col">
main body
</main>
</div>
</div>
</body>
</html>
I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}
You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.
After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".
I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner.
If you do full screen on my code you will see it.
body,
html,
.container-fluid {
height: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
background-color: blue;
color: white;
}
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<!-- Bootstrap CSS CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper h-100">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid ">
<div class="row h-100">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 h-100" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
</body>
</html>
The problem currently is the that using h-100 on the row, makes the child col-12 also set to h-100 exceed the viewport height which causes scrolling and the whitespace under the sidebar.
As of Bootstrap 4.1, there is a flex-fill util class that is helpful for this layout...
.flex-fill {
flex: 1 1 auto;
}
In this case, you can use it so that the child divs grow to fill remaining height. Just set min-height on the .wrapper:
.wrapper {
min-height: 100vh;
}
And then, make container-fluid also a flexbox container (using d-flex). Use the util flex-fill to make row and the middle col-12 fill height:
<div class="wrapper d-flex">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid d-flex flex-column">
<div class="row flex-fill flex-column">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 flex-fill" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
https://www.codeply.com/go/VvogWj44cS
I'm trying to make a responsive design, where I will have
structure like this.
But I want the vertical menu to go from the header to the footer, no matter if there is some text or not.
Here is my code:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="">
<div class="row">
<header class="col-sm-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
Menu horizontal
</div><!-- End of horizontal menu -->
</div>
<div class="site-container container-fluid">
<div class="row">
<div class="col-sm-2 col-lg-2 bordered"> <!-- Vertical menu -->
<menu class="menu-vertical" role="menu">
Menu vertical
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-lg-10 bordered"> <!-- Content -->
Content
</div> <!-- End of content -->
</div>
</div>
<div class="row">
<footer class="col-sm-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is CSS
.bordered {
border: 1px solid black
}
.footer {
position: fixed;
bottom: 0;
}
.header {
height: 67px;
}
.menu-vertical {
position: relative;
height: 100%;
}
.site-container {
position: absolute;
height: 100%;
width: 100%;
}
.menu-horizontal {
height: 18px;
}
There is many ways to achieve what you want. One possible solution is :
1/ Remove "menu-vertical" from the menu element and put it on it's parent. Like this :
<div class="col-sm-2 col-lg-2 bordered menu-vertical">
<menu role="menu">
Menu vertical
</menu>
</div>
2/ Then, add this CSS :
.site-container > .row:first-of-type {
height:100%;
}
And you should be far closer to what you want ;)
.menu-vertical {
position : absolute;
top : height1 px;
bottom : height2 px;
}
see my screen :
http://screencast.com/t/N2NuyOju
I hope here you'll find something that can help.
<head lang="en">
<meta charset="UTF-8">
<title>template</title>
<style>
.bordered {
border: 1px solid red
}
.header {
height: 10%;
}
.menu {
height: 10%;
}
.vertical {
width: 30%;
float: left;
height: 70%;
}
.content {
float: left;
}
.footer {
position: fixed;
bottom: 0;
height: 10%;
}
</style>
</head>
<body>
<div class="">
<div class="bordered header">
<header>
Header
</header>
</div>
<div class="row">
<div class="bordered menu">
Menu horizontal
</div>
</div>
<div class="">
<div class="row">
<div class="bordered vertical">
<menu class="" role="menu">
Menu vertical
</menu>
</div>
<div class="bordered content">
Content
</div>
</div>
</div>
<div class="row">
<footer class="bordered footer">
Footer
</footer>
</div>
</div>
</body>
</html>