Why Does The overflow-y Property Not Work With Percent Height
TL;DR Use the viewport height/width instead of a percentage. Change 100% to 100vh, and you're done!
EDIT:
The percentages take the precentage of the parent element. For example:
console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);
#parent {
background: yellow;
width: 500px;
height: 150px;
}
#child {
background: orange;
width: 50%;
height: 100px;
}
<div id="parent">
<div id="child">
I am 250px wide!
</div>
</div>
Why is percentage height not working on my div?
Use vh
(viewport height) instead of percentage. It will get the height of the browser and size it accordingly, e.g.
height:90vh;
try this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
<div id="tabs" ng-controller="TabsDataCtrl">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers"></leaflet>
</div>
</div>
</body>
</html>
with css
<style>
#wrapper{height:60vh;}
#tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
#leaflet-map{width:78%; height:60vh; overflow-y:scroll; overflow-x:hidden;}
</style>
Div height percentage based but still scrolling
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html
and body
tags, which allows you to reference the view port height.
You want the #header
to be fixed towards the top of the page using position: fixed
, similarly for your footer #input
.
The key is to use absolute positioning on #content
to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll
to allow it to scroll the content (list of messages).
Comment
The source code for the #input
block may be placed outside of the #content
block.
scroll bar on div with overflow:auto and percentage height
In answer to your question, yes overflow:auto
will work, but you will need height: 100%
on the HTML tag as well:
html,body {
height:100%;
margin: 0;
}
#header {
height: 100%;
}
#content {
height: 100%;
overflow: auto;
}
The way your markup is structured though will produce two divs both the same height as the viewport one on top of the other. Is that what you intended?
If so here is a jsFiddle that illustrates your example. I've tweaked the markup and added additional content so that the content div overflows as you require.
http://jsfiddle.net/chrissp26/WsNjm/
Related Topics
Creating Small Navbar and a Side Panel in Materialize CSS
How to Inherit Only One Element of CSS Shorthand
Flexslider Fades But Will Not Slide
Difference Between Bootstrap.CSS and Bootstrap-Combined.Min.CSS
Flex-Flow: Column Wrap. How to Set Container's Width Equal to Content
How to Change Focus Glow of Textarea in Bootstrap 3
How to Make Input Buttons Look Exactly The Same in All Browsers
Bootstrap 4.0 Invalid-Feedback Doesn't Show
How to Make Body Background Image Transparent in CSS
Identify Browser and Os with CSS
Bootstrap 4 Horizontal Scroller Div
Using CSS Modules How to Define a Global Class
Why Does an Inline-Block Div Get Positioned Lower When It Has Content
Is It Somehow Possible to Style an Iframes Before/After Pseudo-Element
CSS3 Background-Size - How to Guarantee Coverage
How to Make Space Between Middle Line and Text
Tab Box CSS for Shinydashboard
Changing Size and Content of Header at Scrolling in Browser with CSS