How to make a div max height equal to the screen height?
Complete solution by my friend:
http://jsfiddle.net/yanhaifa/zhrmxd23/28/
html, body {
height:100%;
margin:0;
}
.ss, .scroll, .footer {
box-sizing: border-box;
}
.ss {
display:flex;
flex-direction: column;
max-height: 100%;
border: 1px solid #ddd;
}
.header {
flex: 0 0 auto;
}
.scroll{
flex: 1 1 auto;
position: relative;
overflow-y: auto; /* add overflow on y-axis so it add the scroll bar */
}
.footer {
flex: 0 0 auto;
margin:0;
border: 1px solid orange;
padding:10px;
}
How to make a div height and width equal to screen width and height?
The Problem you ran into is, that the % sizes relate to the last offset parent (the body or the next relative/absolute/fixed element in the parent chain).
Since your offset parent is using the full screen height, elements using 100% will scale to that size too.
The way to go would be a flex layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Set the flex layout to the parent element of the navigation, set the direction to column and size it to screen height. The navigation will remain static size by adding flex-grow:0; flex-shrink:0.
The content will be shown in a additional .content container, wich takes up the rest of the screen space using flex-grow:1;. The entries will will then be scaled to the height of the .content container using height:100%;.
The footer can also be part of this setup, by placing it in the .sizer container and set flex-grow:0; flex-shrink:0
html,body{ height: 100%; margin:0;}
.sizer { display:flex; flex-direction:column; height: 100%;}
.content { flex-grow:1; overflow: scroll;}
#navigation_panel{ background-color: #15598f; padding: 2%; margin: 0; flex-shrink: 0; flex-grow: 0;}
#navigation_panel>ul{ list-style-type: none; padding: 0; margin: 0;}
#navigation_panel>ul>li{ display: inline; margin : 2%; font-size: 20px; font-family: 'Open Sans', sans-serif; font-weight: 600;}
#navigation_panel>ul>li>a{ text-decoration: none; color: #ffffff;}
section{ width: 70%; margin-left: auto; margin-right: auto; height: 90%; height:100%; padding: 20px 0; box-sizing: border-box;}
#panel-1,#panel-2,#panel-3,#panel-4,#panel-5,#panel-6{ border: 4px solid #27a9e0; position: relative; padding: 4%; height: 100%; box-sizing: border-box;}
#panel-1 p,#panel-2 p:nth-child(1),#panel-3 p:nth-child(1),#panel-4 p:nth-child(1),#panel-5 p:nth-child(1),#panel-6 p:nth-child(1){ font-size: 40px; font-family: 'Open Sans', sans-serif; font-weight: bolder;}
.normal{ font-size: 24px; font-family: 'Open Sans', sans-serif;}
.normal-small{ font-size: 20px; font-family: 'Open Sans', sans-serif;}
.nextBtn{ background-color: #15598f; text-decoration: none; padding: 20px;
font-family: 'Open Sans', sans-serif; font-size: 20px; color: #ffffff;}
.emoji{ width: 25px; margin-left: 5px; vertical-align: inherit; transition: 0.5s;}
.emoji:hover{ transform: rotate(-30deg);}
.AdditionalList>li>a{ color : #1b8ab9; border-bottom: 1px solid #27a9e066; text-decoration: none; margin: auto;}
.AdditionalList>li{ margin-bottom: 20px;}
footer{ margin: 5% 2% 0% 0%;}
.third{ width: 33%; padding: 10px; background-color: #242f4a; color: #ffffff;}
/*Technologies Css*/
.techlist>li{ font-size: 34px; font-family: 'Open Sans', sans-serif;}<div class="sizer"> <div id="navigation_panel"> <ul> <li><a href="index.html">Home</a></li> <li><a href="technologies.html">Technologies</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>
<div class="content"> <section> <div id="panel-1"> <p class="lazyText">Hey!</p> <p class="lazyText">Lorem ipsum dolor </p> <p class="colorTransition">sit amet consectetur.</p>
<a class="nextBtn" id="nextBtn-1" href="#panel-2">Let's Go <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a> </div> </section>
<section> <div id="panel-2"> <p class="lazyText">Lorem ipsum</p> <p class="normal lazyText"> dolor, sit amet </p> <p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" id="nextBtn-2" href="#panel-3">Roger That <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a> </div> </section>
<section> <div id="panel-3"> <p class="lazyText">Lorem ipsum</p> <p class="normal lazyText"> dolor, sit amet </p> <p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" name="nextBtn-3" data="tech" href="javascript:;">Tech Person <img class="emoji" src="images/tech.svg" alt="Tech Icon"></a>
<a class="nextBtn" name="nextBtn-3" data="nontech" href="javascript:;" style="margin-left: 10px;">Non Tech Person <img class="emoji" src="images/non_tech.svg" alt="Non Tech Icon"></a> </div> </section> </div></div>Making equal div height even if the browser is resized
Give a class to all four items. I've used myItem for instance.
const setHeights = () => {
let highestHeight = 0;
//Loop through all elements and get the highest height
$('.myItem').each((index, element) => {
if($(element).outerHeight() > highestHeight) {
highestHeight = $(element).outerHeight();
}
});
//Set the height of all elements to highest
$('.myItem').height(highestHeight);
};
$(window).resize(() => {
//Run each time window is resized
setHeights();
});.myItem {
width: 25%;
color: white;
float: right;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: purple;
}
.four {
background: orange;
}
h3 {
word-wrap: break-word;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button onclick="setHeights()">Make them equal</button>
</div>
<div class="myItem one">
<h3>
Set Div Height Equal to Screen SizeSet Div Height Equal to Screen Sizea
Set Div Height Equal to Screen SizeSet Div Height Equal to Screen Sizea
Set Div Height Equal to Screen Sizeaa
</h3>
</div>
<div class="myItem two">
<h3>
</h3>
</div>
<div class="myItem three">
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>
<div class="myItem four">
<h3>
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
ddddddd
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
ddd
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
ddddd
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
ddddddd
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left
d
</h3>
</div>How to specify max-height css property to Screen size
Scroll bar appears only when content is overflown.
If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}
Related Topics
Multiple Background Images Using SASS/Compass
Wobbly CSS Animation with Border-Radius in Internet Explorer
Is -Negative Margin or Padding Invalid CSS According to W3C
How to Add Multiple Linear-Gradients to a CSS Background
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS
Is It Ok to Use Cellpadding="2" Cellspacing="2" in <Table>
Assigning Visible Property of the Button to a Static Method Result
Can You Create Space Between Background Image Repeats
I Need to Remove the Horizontal Scrollbar on an Overflown <Div>
Scale Image with CSS to Both Width and Height to Scale
Animating a Smooth CSS Grid-Column Change
Angular Material Md-Datepicker Inside Bootstrap Modal
Scale an Image to Maximally Fit Available Space and Center It
CSS Background Image Centered with Stellar Js
How to Position The Bootstrap Carousel Controls to The Extreme Right and Extreme Left