Resize div along with content inside according to window size
You can use the vw value to make divs that shrink proportionally with the window.
Example
HTML
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
CSS
.one {
width: 20vw;
height: 20vw;
background-color: #76ccde;
float: left;
margin-left: 10px;
}
.two {
width: 25vw;
height: 25vw;
background-color: #c976de;
float: left;
margin-left: 10px;
}
.three {
width: 30vw;
height: 30vw;
background-color: #a7de76;
float: left;
margin-left: 10px;
}
Resize div on resizing window
Based on suggestions from folks above, I am pasting the answer here for reference to others who would like to see a working solution!
.footer-box{ position: fixed; font-family: Arial, sans-serif; color: #FFFFFF; background-color: #000000; font-size: 11px; width: 100%; opacity: 0.8; z-index: 50; bottom: 0px; left: 0px;}.footer-box h2{ margin-top: 0; margin-bottom: 0; font-size: 20px; text-align: center; line-height: 30px; font-weight: normal; font-family: Arial, sans-serif; color: #A9A9A9;}.footer-box a{ text-decoration: none; outline: none; color: #A9A9A9;}.footer-box a:hover{ text-decoration: underline;}
<div class="footer-box"> <h2> <a href="/weddings/">Weddings</a> | <a href="/cityhall/">City Hall</a> | <a href="/engagements/">Engagements</a> | <a href="/barmitzvah/">Bar Mitzvah,Quinceanera</a> | <a href="/birthdays/">Birthdays</a> | <a href="/maternity/">Maternity</a> | <a href="/portraits/">Portraits</a> </h2> </div>
How to make div element auto-resize maintaining aspect ratio?
The aspect-ratio
ref property has a good support now so you can use the below:
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: gray;
}
.stage {
--r: 960 / 540;
aspect-ratio: var(--r);
width:min(90%, min(960px, 90vh*(var(--r))));
display: flex;
justify-content: center;
align-items: center;
background:
/* this gradient is a proof that the ratio is maintained since the angle is fixed */
linear-gradient(30deg,red 50%,transparent 50%),
chocolate;
}
<div class="stage">
<p>Some text</p>
</div>
Resizing Div vertically when view port is resized
Looks like a job for Flexbox:
body {
height: 100vh;
padding: 0;
margin: 0;
}
.container {
height: 100%;
border: 1px solid #bbb;
}
.page-header {
display: block;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.override {
border: 1px solid blue;
height: 100%;
overflow: auto;
}
.footer {
text-align: center;
height: 25px;
}
JSFiddle demo:https://jsfiddle.net/9yhsnaLk/2/
How to change height of DIV based on window size
When you set a specific height on an image it will always stay that height regardless of browser resize
When you set a specific height on a "container" or an element surrounding your image, your image will be constricted to that containers dimensions.(generally speaking)
You will need to remove your height: 400px
if you wish for the image to resize.
Note: Your image will only 'grow' to its natural size. So if you have an image that is 200px high and 200px wide thats as big as it will get(without altering picture).
Also... If you must have at LEAST 400px height on your image - try using
image{
min-height: 400px;
}
This is basically just setting your image so that the very smallest height that it can be is 400px;
If you want your image to grow dynamically with browser resize there are several ways to accomplish that. Check out this tutorial
http://css-tricks.com/perfect-full-page-background-image/
div height according to window size with overflow-y: auto
Use vh to fix height according to screen size.
vh Relative to 1% of the height of the viewport*
ref: https://www.w3schools.com/cssref/css_units.asp
Related Topics
What Are Valid Values For the Id Attribute in Html
Maintain the Aspect Ratio of a Div With Css
Center One and Right/Left Align Other Flexbox Element
Css Margin Terror; Margin Adds Space Outside Parent Element
How to Make a Div 100% Height of the Browser Window
Why Is Percentage Height Not Working on My Div
Why Does This CSS Margin-Top Style Not Work
Understanding CSS Selector Priority/Specificity
How to Disable Browser Autocomplete on Web Form Field/Input Tags
Max Parallel Http Connections in a Browser
How to Style a Checkbox Using Css
Flexbox Code Working on All Browsers Except Safari. Why
How to Make a Div Not Larger Than Its Contents