Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
Related
I am trying to use the grid structure by bootstrap to create a nice looking page. However, my div is moved and columns in rows are not aligned anymore:
The box with the three should be in line with the blue background. What am I doing wrong? What is the reason for this? I would like to understand. My code is:
EDIT1
I added no-margto the <h1>but now it looks like this: How can I get to fill out the full height?
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
The box has a margin-top. Set it to 0
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white no-marg">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
Add display: -webkit-box; to .dark-theme
.no-marg{
margin:0 !important;
padding:0 !important;
}
.sm-pad{
padding:5px;
background-clip:content-box;
}
.col-white{
color:white;
}
.dark-theme {
color: white;
background-color:#17191B;
height: 100%;
display: -webkit-box;
}
#step-no{
margin:20px;
}
.light-theme {
color: black;
background-color:#EFEFEF;
}
.cont-box {
margin:6px;
}
body {
background: black;
}
#media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
.red-square{
background-color: red;
border-radius: 0;
}
.btn:hover{
background-color: #78BE20;
}
.blue-rectangle{
background-color: #008ECF;
border-radius: 0;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>
<body>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10">
<h1 class="col-white">Step</h1>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<div class="row equal">
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>
</div>
<div class="col-sm-10 blue-rectangle">
<div class="row equal">
<div class="col-sm-3">
<div class="dark-theme">
<h1 class="col-white">3</h1>
</div>
</div>
<div class="col-sm-9">
<span color<img alt="Warning Logo" src="./image/warning.svg">
</div>
</div>
<div class="row equal">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
<div class="col-sm-1 red-square">
<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>
</div>
</div>
<script src="steps_v1.js"></script>
</body>
</html>
I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!DOCTYPE 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.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!
Try this
<!DOCTYPE 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.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>
I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}
This is my entire HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body { background: url(img/dark.png) !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 515px; z-index:9999; position:relative; color:#FFCC00;}
#links {padding-top: 0.6cm;}
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<img src="img/iconf.png" class="img-responsive" style="max-width:180px">
</div>
<div class="col-md-4" align="right" id="links">
Read books
Play
Eat
Help
</div>
</div>
<div class="jumbotron" style="background: url('img/yellow.jpg')">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Eg: 'Fifty Shades of Gray'" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't know how to align the search box to the center of the page. I have tried adding align="center" in the input tag but it doesn't work. I saw a few examples where float:center property was being used but I don't understand where I should use it in my code. Please help. Thanks you.
Replace these lines -
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
by these lines -
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
You'll have your search box centered.
To understand how this is working, visit here - http://getbootstrap.com/css/#grid-offsetting
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>