I'd like to understand why in my case, the height: x% does not apply. With percentage the div/section always get height:0.
My code: http://codepen.io/anon/pen/aHhmD
For an element to have a height in percentage applied, its ancestors must have a height applied. Your section.geral only has a min-height applied. Give it a height instead:
html, body{
padding:0;
margin:0;
height:100%
}
.geral{
position: relative;
display: block;
min-width: 100%;
height: 100%;
background-color: #008000;
}
.um{
position: relative;
display: block;
background-color: navy;
min-width: 100%;
min-height: 50%;
}
.dois{
position: relative;
display: block;
background-color: orange;
min-width: 100%;
min-height: 50%;
}
Using width and height instead of min-width and min-height also fixes the issue.
Related
Can't wrap my head around it! I try to make parent div to take no more than 80% height of the window with max-height, and child div to take all parent height minus something.
But height property in percents of the parent doesn't work for the child at all, unless I give parent height property.
Why is that?
Here is my simplified fiddle: https://jsfiddle.net/mbatcer/m2ohnsf5/
Why does inner div not respect parent height and go out of container?
HTML:
<div class="container">
<div class="inner">
<img src="http://via.placeholder.com/70x300">
</div>
</div>
CSS:
.container {
background: blue;
padding: 10px;
max-height: 100px;
}
.inner {
height: 100%;
width: 70px;
overflow: hidden;
}
I think this is what you are looking for:
.container {
background: blue;
padding: 10px;
max-height: 100px;
display: flex;
}
.inner {
width: 70px;
overflow: hidden;
}
Here is the fiddle: https://jsfiddle.net/f9sfczya/1/
Here I added display: flex; in your parent div and removed height: 100%;
from child div.
Unfortunately display: flex; is unsupported by IE9 and older.
Hope this may help you.
If you set child's max-height with a percentage, it will set the child's height according to the parent's real height instead of the max-height.
So you will need to set a height to your .container and set a max-height: 100% to your image since your image has lager height than width.
.container {
background: blue;
padding: 10px;
height: 100px;
}
.inner {
height: 100%;
overflow: hidden;
}
img {
max-height: 100%;
}
A better way to solve this problem is to use flex-box.
.container {
display: flex;
flex-flow: row;
background: blue;
padding: 10px;
max-height: 80vh;
}
.inner {
overflow: hidden;
}
img {
max-height: 100%;
}
Add height:80vh; to .container and it will work.
You should change your CSS like this-
.container {
background: blue;
padding: 10px;
}
.inner {
max-height: 100px;
width: 100% ;
overflow: hidden;
}
.inner img {
max-height: 100px;
}
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>
I need to create a page where I would have a 100% wrapper between header and footer elements. The wrapper is a general content view where I will be adding templates. Apart of having the wrapper 100% height I need to have a first section in the wrapper also with 100% height.
The main problem is that I cannot position the footer relatively after the wrapper. It stays somewhere in the middle. See fiddle for example.
HTML
<header ui-view="header"></header> <!--Fixed Height/Relative-->
<div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
<section></section> <!--100% Height/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
</div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->
CSS
body{
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html{
height: 100%;
}
div{
position: relative;
height: 100%;
width: 100%;
}
section:first-child{
height: 100%;
}
section{
position: relative;
display: block;
height: 400px;
width: 100px;
border: 1px solid black;
}
header{
position: relative;
height: 100px; width: 100%; background: red;
}
footer{
position: relative;
height: 100px; width: 100%; background: red;
}
JSFiddle
I believe the div you have around your sections is what's causing you some trouble. Check out the snippet below. If you place only your first section and the header in that div, you can accomplish what you want by putting height 100% on that div.
Note that without that div, your :first-child pseudo selector won't work because that section is no longer the first child of it's parent (header is). So I added an ID to it simply so I can reference it in the CSS.
So now the div is 100% of the height, header is a fixed height, and section1 is at 100% filling the remainder of the div.
body{
margin: 0;
padding: 0;
height: 100%;
background:green;
}
html{
height: 100%;
}
div{
height: 100%;
width: 100%;
background: pink;
}
section {
display: block;
height: auto;
width: 100%;
border: 1px solid black;
}
section#section1 {
height: 100% !important;
}
header{
height: 50px; width: 100%; background: red;
}
footer{
height: 50px; width: 100%; background: blue;
}
<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>
The height:100% you have set on the body is what's causing your footer element to be in the middle of the page. Remember that '100%' is '100% of your window height', so be careful with that. Cheers.
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.