So, I'm creating a landing page for a client and they want a full-screen hero div with a playing video in the background. The conventional way to do this is for it to be done through:
div.hero {
position: absolute;
width: 100%;
height: 100%;
}
However, I'm being awkward and I need the position to be declared as relative. I also want to limit the height so that you can't shrink the div below 640px, and can't stretch it more than 800px.
Here's my code:
div.hero {
position: relative;
width: 100%;
height: 100%;
max-height: 800px;
min-height: 640px;
display: block;
}
The issue occurs that the box does not become 100% height, and instead it scales to 640px.
How could I fix this?
Use 100vh instead of 100% in height and it will work.
div.hero {
position: relative;
width: 100%;
height: 100vh;
max-height: 800px;
min-height: 640px;
display: block;
background:red;
}
<div class="hero"></div>
you can use this:
html, body {height:100%; margin:0; }
div.hero {
position: relative;
width: 100%;
height: 100%;
max-height: 800px;
min-height: 640px;
display: block;
background:blue;
}
<div class="hero"></div>
Related
When I set the height of image to 100% it takes 100% of view port not 80%.
I used overflow:hidden for container that it worked but the image cropped and I couldn't fixed it with any options of img and css.
I also replaced img tag with div and set background image for it but I got same problem and image cropped with it again.
codepen
.container {
max-width: 1200px;
height: 80vh;
margin: 0 auto;
background-color: red;
position: relative;
overflow: hidden;
}
.image-container {
position: absolute;
right: 0;
left: 0;
top: 30%;
width: 50%;
height: 100%;
background-color: blue;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-position: center;
}
<div class="container">
<div class="image-container">
<img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_582,c_limit/phonepicutres-TA.jpg" alt="">
</div>
</div>
Don't use height:100% since you are setting top:30%. Either consider reducing the height to 70% to avoid the overflow or simply use bottom:0 and your element will stretch to cover all the height whataver the value of top.
I'm not sure as to why when I drag my browser around my text and video overlap. I want to prevent this:
Here is a jsfiddle example:
https://jsfiddle.net/liondancer/m3xug7vo/
example:
Here is the CSS regarding the particular page:
.wrapper {
width: 950px;
margin: auto; /* Centering blocks */
/*position: relative;
display: block;*/
}
.index {
}
.video-container {
position: relative;
min-width: 100%;
min-height: 100%;
/*width: auto;
height: auto;*/
z-index: -100;
background: no-repeat;
/*background-size: cover;*/
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.title-area {
height: 100%;
width: 100%;
vertical-align: middle;
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
position: relative;
}
}
.index-aboutus {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
display: block;
}
.index-ourwork {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
.index-instructors {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
The HTML:
The video container is using a height of 100vh, there is one thing you have to think of:
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist.
See http://www.w3.org/TR/css3-values/#viewport-relative-lengths
An easy way to fix this would be to add a class to the parent div of video-container and add a property to set it to overflow: hidden;
It would look like the following:
.video-containerParent {
overflow: hidden;
}
Please see the following jsFiddle for an example:
https://jsfiddle.net/m3xug7vo/1/
The following site has an interesting article about viewport units:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
Hi I search for reason why my inner divs don´t have 100% height. i check a lot o threads here and on internet, but nothing work. I need website which have content with same width and height as browser content = for that I need all divs with height of browser height. I search for CSS only solution (= no CCS3, no Javascript/Jquery, etc..).
<div class="obsah">
<div class="obsah_in_1_3">
obsah1
</div>
<div class="obsah_in_2_3">
obsah2
</div>
<div class="obsah_in_3_3">
obsah3
</div>
</div>
html, body{
height: 100%;
}
.menu{
position: relative;
float: left;
width: 260px;
height: 100%;
min-height: 100%;
height:auto !important;
background-color: green;
}
.obsah_in_1_3 {
float: left;
width: 33%;
background-color: #FF0000;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah_in_2_3 {
float: left;
width: 33%;
background-color: #00FF00;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah_in_3_3 {
float: left;
width: 34%;
background-color: #0000FF;
height: 100%;
min-height: 100%;
height:auto !important;
}
.obsah{
position: relative;
display: block;
height: 100%;
min-height: 100%;
height:auto !important;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
Here is Jsfiddle
I try used absolute position with bottom: 0px; to inner divs (obsah_in_1_3, obsah_in_2_3, obsah_in_3_3) and this work, but I need have floating divs, because after solved this problem I need change their width with Jquery nd they need float together.
=> simply I don´t know why inner divs (obsah_in_1_3, obsah_in_2_3, obsah_in_3_3) not work and div "menu" work and these divs are same.
Not any large reason you are use two times height property with different value that's why not work,
Check this Demo jsFiddle
position: relative; another display: block; and third height: 100%; this three properties are great roll to archive 100% height.
CSS
html, body{
height: 100%;
}
.hlavicka{
position: relative;
float: left;
width: 260px;
height:100%;
background-color: grey;
}
.obsah_in_1_3 {
float: left;
width: 33%;
background-color: #FF0000;
height: 100%;
}
.obsah_in_2_3 {
float: left;
width: 33%;
background-color: #00FF00;
height: 100%;
}
.obsah_in_3_3 {
float: left;
width: 34%;
background-color: #0000FF;
height: 100%;
}
.obsah{
position: relative;
display: block;
height: 100%;
float: left;
width: 50%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
Hope now this help you!
Height 100% means you can add the content in div & the height changes according to div. You can set height in pixels or you can get the Window resolution and set the height of the div according.
Take out height:auto !important from your parent and child divs. Height 100% should do what you need.
I'm trying to vertical align a child div to the bottom of its parent div, and set it as a percentage of the parent's height.
However, the height: 20% property of the child seems to be getting ignored, and the div stretches to take up the entire 100%.
The end goal is to have a full-screen title page photo as an intro to an article, with a semi-opaque bar running along the bottom of the photo that will have the title of the article in it. I'm using percentages to make it a responsive design for any size screen.
JS Fiddle:
http://jsfiddle.net/A52fw/1/
HTML:
<body>
<div id="outerdiv">
<div id="innerdiv">
test
</div>
</div>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
display: table-cell;
vertical-align: bottom;
}
Use positioning (relative on the parent, absolute on the child) instead of the display property:
#outerdiv {
height: 100%;
width: 100%;
position:relative;
}
#innerdiv {
width: 100%;
height: 20%;
background-color: red;
position:absolute;
bottom:0;
}
jsFiddle example
You can do this without absolute positioning, since you know the height of the child.
#outerdiv {
height: 100%;
width: 100%;
display: table;
}
#innerdiv {
width: 100%;
height: 20%;
margin-top: 80%;
}
In case your height is in pixels you can use:
#innerdiv {
width: 100%;
height: 40px;
margin-top: calc(100% - 40px);
}
I have a CSS table set out with divs displaying two cells in one row. Each cell has a large image. The table should be full window size.
I want to make the large images scale down to fit side by side in the dimensions of the users window, whatever resolution that maybe. At present the images are at their full dimensions and won't scale down even if I target them directly with height: 100% width: auto and max-height: 100% max-width: auto.
Thanks very much for anyone who can help or point out the obvious.
HTML:
<div class="parent">
<div class="left"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/rainbow-colors-wallpaper-wallpapers-28469135-2560-1600.jpg"/></div>
<div class="right"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/new-2013-high-quality-abstract-wallpaper.jpg"/></div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
width: auto;
}
.parent > div{
display: table-cell;
height: 100%;
width: auto;
}
.parent > .right {
height: 100%;
width: auto;
}
img {
width: auto;
height: 100%;
max-height: 100%;
max-width: auto;
}
Here is a JSFiddle
P.s Apologies for the load time of the large example images.
Edit: it's only about height so inline-block or float will be efficient :
html, body, .parent {
height: 100%;
margin:0;
}
.parent {
white-space : nowrap;
}
.parent > div {
display:inline-block;
height: 100%;
vertical-align:top;
;
}
img {
height: 100%;
max-height: 100%;
}
See http://jsfiddle.net/53ySr/6/
note the simpliest is http://codepen.io/gc-nomade/pen/vGhbf (no div.right nor div.left)
this was first version shrinking within window's width for those who are curious :
using display:table, you need table-layout to control width, that helps .
see http://jsfiddle.net/53ySr/2/ jsfiddle.net/53ySr/3/
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
table-layout:fixed;
width: 100%;
}
.parent > div{
display: table-cell;
height: 100%;
width: 50%;
background:#233C40;
}
img {
width: 100%;
height:100%;/* you can remove this */
max-height: 100%;
}
Just do the following edit to your css, It will do the trick.
html, body {
width: 100%;
height: 100%;
}
.parent{
display: table;
height: 100%;
width: inherit;
}
.parent > div{
display: table-cell;
height: 100%;
width: 50%;
}
.parent > .right {
height: 100%;
width: 50%;
}
.parent > .left {
height: 100%;
width: 50%;
}
img {
width: 100%;
height: 100%;
}
the fiddle is here http://jsfiddle.net/bvbHF/