Hi and thanks before hand.
I recently started learning html and CSS and I'm currently working on a website, I have a div where I'm using bootstrap containers the issue is that when I shrink the screen to the smallest option the text leaves the screen to the left and I cant figure out how to make it not to.
This is my code:
h1 {
position: relative;
top: 3.125rem;
right: 6.8rem;
font-weight: 300;
font-size: 3.5rem;
line-height: 1.5;
color: white;
letter-spacing: 2px;
padding-bottom: 4rem;
}
#firstsection {
background-color: #FF5D5D;
padding-bottom: 1rem;
height: auto;
margin-left: auto;
margin-right: auto;
}
.img1 {
transform: rotate(20deg);
position: relative;
top: 25%;
left: 8px;
width: 17rem;
z-index: 0;
}
.container-fluid {
padding: 3% 10%;
}
.btnposition {
position: relative;
top: 1rem;
right: 7rem;
bottom: 12.5rem;
}
<section id="firstsection">
<div class="container-fluid container1">
<div class="row">
<div class="col-lg-6 text-and-button">
<h1>Meet your perfect skating partner</h1>
<button type="button" class=" btn btn-primary btn-lg bg-dark btnposition btn-apple ">
<i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg btnposition"><i class="fab
`enter code here`fa-google-play">
</i> Download</button>
</div>
<div class="col-lg-6 pa-5">
<img class="img1" src="iphone6skate.png" alt="iphoneimg">
</div>
</div>
</div>
</div>
</section>
It's not clear why you are using relative positioning instead of margins/padding to position your elements?
Try removing "right: 6.8rem;" and "right: 7rem" from the h1 and .btnposition classes for starters.
Related
I want to place these buttons alongside the icon button on top of the three images above them. I have tried setting them to position: absolute; and and using the z-index but this results in the buttons not aligning on top of each respective image, and if I do manually position them, they are no longer aligned whenever I resize the window. I want to keep these buttons trapped within the div that the images are in, while still overlaying them. Is this possible?The image is shown below of what it currently looks like
here is the code:
<div class="imageSection">
<div class="container paddingContainer">
<div class="row">
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/srblogthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info1" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/digitaltwinthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info2" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
<div class="col-4 borderEraser">
<img class="imageResize" src="{% static 'webapp/images/mariopicthumb.jpg' %}">
<div class="info">
<a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
<a class="btn btn-dark alignRight" href="#">View Code</a>
<a href="#">
<img class="iconImage" id="info3" src="{% static 'webapp/images/infoIcon.png' %}">
</a>
</div>
</div>
</div>
and the css:
body {
background-image: url("images/background2.jpeg");
}
h1 {
color:aliceblue;
}
.srlogoimage {
width: 75%;
height: 75%
}
.hidden {
display: none;
}
.textCentered {
text-align: center;
}
.imageResize {
position: relative;
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
background-size: cover;
border-radius: 10%;
max-height: 100%;
max-width: 100%;
}
.borderEraser {
margin-left: 0px;
margin-right: 0px;
border-left: none;
border-right: none;
display: block;
padding-left: 0px;
padding-right: 0px;
}
.alignRight {
float: right;
justify-content: center;
}
.alignLeft {
float: left;
justify-content: center;
}
.alignBottom {
text-align: center;
}
.imageSection {
position: relative;
z-index: 0;
}
.info {
padding: 1%;
z-index: 9;
}
.iconImage {
max-height: 10%;
max-width: 10%;
border-radius: 50%;
background-color: aliceblue;
}
.paddingContainer {
border-color: blanchedalmond;
border: 50%;
padding-left: 9%;
padding-right: 9%;
}
any help or pointers will be greatly appreciated, I've been stuck on this for a week now
If it's something like this you trying to achieve:
You can add
.borderEraser {
position: relative;
}
.info {
position:absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, 30%); // try different values
}
to your css-classes. To change positioning when images get small (on resize), you could maybe use media-queries and change position-style.
If you decide to use the images as backgrounds instead, you should use flexbox and align buttons accordingly.
I am building a Electron app of which layout would be like this:
| header bar |
|col 1| col 2| col 3|
| bottom bar |
There would be 3 columns in the main view between the fixed top and bottom bar while the 3 columns are y-scrollable and each of them has a separate html embedded.
This is the html and SCSS code of my layout but all the columns stick to the top and hidden by the header bar and the bottom bar didn't even show up.
Any idea to fix this? Thanks!
HTML
<body>
<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2” class="col-4 main-col">
<button id="btn-img-2” type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3” class="col-4 main-col">
<button id="btn-img-3” type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">
</div>
</body>
SCSS
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
position: fixed;
left: 0;
top: 0;
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
}
#bottom-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
}
Check This code
also change ” to "
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
width:33.33%;
float:left;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
margin-bottom:15px;
}
#bottom-bar {
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
margin-top:15px;
display:inline-block;
}
<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2" class="col-4 main-col">
<button id="btn-img-2" type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3" class="col-4 main-col">
<button id="btn-img-3" type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">bottom bar
</div>
I have a group of three columns. Inside each column is the following:
A small circular div, which contains a font-awesome icon.
A small heading tag
Another div, which contains some text and a button.
I have been having issues with getting the third item to be an equal height with each other. I also need the buttons to be on the same height as well. I understand how to make divs the same height (shown here!)
However, I cannot get these divs to be of an equal height, and with the button to be in the same position. Here is the HTML code:
<div class="container-fluid">
<div class="row justify-content-center h-100">
<div class="col-3">
<div class="circleAboutUs">
<i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
</div>
<h1 class="about-us-text">Hackers</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
The early registration deadline is October 15th and regular registration closes November 3rd.
For more information check out the FAQ!
</div>
<button class="about-us-button" type="button"><h2>Register</h2></button>
</div>
</div>
<div class="col-3">
<div class="circleAboutUs">
<i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
</div>
<h1 class="about-us-text">Mentors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Interested in volunteering to help our hackers the day of the event?
Sign up here to be a mentor for Codestellation.
</div>
<button class="about-us-button" type="button"><h2>Sign Up</h2></button>
</div>
</div>
<div class="col-3">
<div class="circleAboutUs">
<i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
</div>
<h1 class="about-us-text">Sponsors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Codestellation can’t take off without our sponsors!
Learn more about what perks you’ll recieve and how your partnership will contribute to the event.
</div>
<button class="about-us-button" type="button"><h2>Sponsor</h2></button>
</div>
</div>
</div>
Here is the CSS:
.circleAboutUs {
border: 3px solid #FAA880;
margin: 0 auto;
border-radius: 100%;
height: 140px;
width: 140px;
background-color: #FAA880;
}
.about-us-content-container {
margin: auto;
border-radius: 10%;
background-color: #FAA880;
text-align: center;
margin-bottom: 60px;
}
.about-us-content-text {
font-family: 'Mina', 'Montserrat', monospace;
padding: 25px 25px;
font-size: 2em;
}
.about-us-text {
text-align: center;
color: #3A318C;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.about-us-button {
border-radius: 20%/50%;
border: 1px solid black;
text-align: center;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
color: #3A318C;
margin-bottom: 10px;
padding-top:10px;
}
.about-us-button:hover {
cursor: pointer;
background-color: white;
}
.col-sm > .about-us-content-container {
height: 55px;
}
It currently looks this: Example
I want it to maintain its responsiveness, so the header and the div still stack nicely on mobile.
This behavior can be easily achieved by using flex box.
First, we create div wrapper for every child of all the columns in bootstrap.
We set the height of those children to 100% in order to make them fill the whole containers.
Then, we set flex-grow: 1 so the about-us-content-container will fill the whole container including spare spaces.
But now about-us-content-container will have an auto margin, which prevents it from filling the whole container. So, we have to set the margin to 0.
The about-us-content-container now fills all the spaces. But the button is still not at the bottom. We can get this by doing the same thing
Setting display to flex.
Setting flex-grow of the about-us-content-text to 1.
The buttons are now filling the whole width of about-us-content-container now. To avoid this, wrap a div around the buttons.
Here is the solution in Codepen: https://codepen.io/anhanhvina/pen/WKmoWQ
Below is the code that works. You can now add more classes to make it responsive.
.col-3 > div {
display: flex;
flex-direction: column;
height: 100%;
}
.about-us-content-container {
flex-grow: 1;
display: flex;
flex-direction: column;
margin: 0 !important;
}
.about-us-content-text {
flex-grow: 1;
}
.circleAboutUs {
border: 3px solid #FAA880;
margin: 0 auto;
border-radius: 100%;
height: 140px;
width: 140px;
background-color: #FAA880;
}
.about-us-content-container {
margin: auto;
border-radius: 10%;
background-color: #FAA880;
text-align: center;
margin-bottom: 60px;
}
.about-us-content-text {
font-family: 'Mina', 'Montserrat', monospace;
padding: 25px 25px;
font-size: 2em;
}
.about-us-text {
text-align: center;
color: #3A318C;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.about-us-button {
border-radius: 20%/50%;
border: 1px solid black;
text-align: center;
font-family: 'Mina', 'Montserrat', monospace;
font-weight: bold;
color: #3A318C;
margin-bottom: 10px;
padding-top:10px;
}
.about-us-button:hover {
cursor: pointer;
background-color: white;
}
.col-sm > .about-us-content-container {
height: 55px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row justify-content-center h-100">
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fas fa-user-astronaut fa-5x" style="color: white; padding-top: 25px; padding-left: 34px;"></i>
</div>
<h1 class="about-us-text">Hackers</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
The early registration deadline is October 15th and regular registration closes November 3rd. For more information check
out the FAQ!
</div>
<div>
<button class="about-us-button" type="button">
<h2>Register</h2>
</button>
</div>
</div>
</div>
</div>
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fab fa-reddit-alien fa-5x" style="color: white; padding-top: 30px; padding-left: 28px"></i>
</div>
<h1 class="about-us-text">Mentors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Interested in volunteering to help our hackers the day of the event? Sign up here to be a mentor for Codestellation.
</div>
<div>
<button class="about-us-button" type="button">
<h2>Sign Up</h2>
</button>
</div>
</div>
</div>
</div>
<div class="col-3">
<div>
<div class="circleAboutUs">
<i class="fas fa-space-shuttle fa-rotate-270 fa-5x" style="color: white; padding-right: 27px; padding-top: 14px; padding-bottom: 5px"></i>
</div>
<h1 class="about-us-text">Sponsors</h1>
<div class="about-us-content-container">
<div class="about-us-content-text">
Codestellation can’t take off without our sponsors! Learn more about what perks you’ll recieve and how your partnership
will contribute to the event.
</div>
<div>
<button class="about-us-button" type="button">
<h2>Sponsor</h2>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I cant figure out why the red buttons are not displayed properly in firefox. In chrome it looks good.
Here is the fiddle:
Fiddle
That is my chrome:
That is my firefox:
My HTML:
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
My CSS:
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
}
Well I dont know what details to add. I tried to change everything in firefox browser dev tools but could never achieve the same behaviour as in chrome.
https://jsfiddle.net/7vz89t4d/2/
.img-element-del {
position: relative; /* this is new */
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
position: absolute;
bottom: 0; /* this is new */
left: 0; /* this is new */
}
Short explanation:
If using position:absolute; do also set position:relative; to the parent. Then absolute is always from the parent.
This picture might help:
the picture is from css-tricks.com/absolute-positioning-inside-relative-positioning which explains it even a little further.
The above picture in code would look like:
.parent {
position: relative;
width: 400px;
height: 300px;
border: solid 3px CHOCOLATE;
}
.absolute-one,
.absolute-two,
.absolute-three {
position: absolute;
background-color: CHOCOLATE;
color: white;
padding: 10px;
width: 100px;
height: 100px;
}
.absolute-one {
top: 0;
left: 0;
}
.absolute-two {
bottom: 5px;
left: 10px;
}
.absolute-three {
top: 30%;
right: -25px;
}
<div class="parent">
<div class="absolute-one">
top: 0;
left: 0;
</div>
<div class="absolute-two">
bottom: 5px;
left: 10px;
</div>
<div class="absolute-three">
top: 30%;
right: -25px;
</div>
</div>
I've updated your fiddle here -> https://jsfiddle.net/7vz89t4d/3/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
bottom: 0;
left: 0;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
Try adding "Left:0;" and "bottom:0;" in your deletebtn css
Here I have craeted a new one. You do not have to use position absolute or something similar.
jsfiddle
I have just put each "image" and "a" in a div
<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
and style:
.bilder-row{width:160px;float:left;}
this will solve the problem.
When styling a page with markup, generally avoid absolute positioning within your layout. Absolutely positioned items make for very brittle layouts which make responsive design very very challenging. Only use it as a last resort. I'd recommend you fully utilize Bootstrap. It's a very powerful tool but is opinionated about your markup. I've refactored your example into something more responsive while taking full advantage of the Bootstrap grid: http://getbootstrap.com/css/#grid
Here's the full Codepen example: http://codepen.io/toddsby/pen/pRLQem
Viewed on Firefox 51 (macOS)
HTML
<div class="row gutter-5">
<div class="img-element-del col-xs-3">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
<div class="deletebtn-container">
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
</div>
</div>
CSS
/** custom Bootstrap grid gutter **/
.row.gutter-5 {
margin-left: -10px;
margin-right: -10px;
}
.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
I've moved the items into a col-3 (12/4) grid. Then styled the image and button to take up 100% of their containers. This allows for a flexible and responsive layout. You can then use Bootstrap breakpoints to target different devices. ie <div class="img-element-del col-xs-1 col-md-2 col-lg-3">
Note: This layout would be very simple with Flexbox. As of 2016, Flexbox is supported by all major browsers! You can learn more about Flexbox here: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
Try add position: relative; to .img-element-del
and to .deletebtn add this properties:
z-index: 1;
left: 0;
bottom: 10px;
I have a website where I want a header and a sidebar.
My intended functionality is that the sidebar extends to the bottom of the page, which it does. However, it has content that extends beyond the viewport, I'm guessing because the .menu is sized to 100% of the entire body container, yet is pushed down because of the header.
How do I make it such that the menu only extends all the way down the viewport?
<body>
<div class="container-fluid">
<header class='row'>
<div class="col-md-1">
<a href="#" class="menu-icon-link">
<i class="glyphicon glyphicon-list"></i>
</a>
</div>
<div class="input-group col-md-4 col-md-offset-4">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</header>
<div class="row menu-container">
<div class="menu col-md-2">
Lorem ipsum...
</div>
</div>
</div>
</body>
My CSS:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
padding: 3.5em 0 0 0;
box-sizing: border-box;
}
.menu-container {
display: block;
}
.menu {
position: fixed;
top: 3.5em;
padding: 1em;
background: #A9E2AD;
height: 100%;
overflow-y: scroll;
}
.glyphicon-list {
font-size: 1.5em;
color: #FFF;
}
header {
background: #50af4c;
color: #fff;
position: fixed;
top: 0;
width: 100%;
padding: 0.5em 1em;
display: block;
}
You don't need to use an explicit height, you can use positioning for what you want.
.menu {
position: fixed;
top: 3.5em;
bottom: 0; //add this
padding: 1em;
background: #A9E2AD;
//height: 100%;
overflow-y: scroll;
}