I want to have CSS that makes each div the size of the screen and then whenever the user scrolls the next div will snap into view. There's a JavaScript library that does the latter but I can't remember the name. As for getting every div the size of the screen I have tried the following but to no avail.
<div>Div Content</div>
div {
width: 100%;
height: 100%;
}
You can use vw and vh to make an element the size of the viewport:
div {
width: 100vw;
height: 100vh;
}
Divs are block elements and 100% of the width of the parent by default. As for the height, use 100vh instead.
There are new units in css3 which makes it easier to assign viewport-width and viewport-height.
They are vw,vh.
div{
width:100vh;
height:100vh;
}
if your div are direct child of body, then height:100% can be calculated from the viewport if every parents are set the same.
Why? : % needs a value from the parent to be calculated and applied.
width is here not necessary for block elements and can even become a problem if margin, border or padding are added.
html,
body,
div {
height: 100%;
}
<div>Div Content</div>
<div>Div Content</div>
<div>Div Content</div>
Related
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
I'm stressing out because of a mindbreaker and I'm probably missing some essential, but easy thing.. And although I've done this many times before.. it's going wrong now.
So I'm creating a web app and always my starting point is
html, body {
height:100%;
width:100%;
}
And some of my inner elements have a set height in percentages and some in pixels.
However, to have some structure in my code, I'm setting up div's without a set height. Let's set up the following situation.
HTML
<div class="wrapper">
<div class="thisIsAStructureItem">
<div class="innerElement">
And just some untagged piece of text
</div>
</div>
</div>
CSS
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
/* nothing, not even height */
}
.innerElement {
height: 17.5%;
}
But in any editor or browser, because I haven't set a specific (%/px) height on the second element, it shows up as 0px, including all the inner elements.
So stupid as this might be.. What am I doing wrong?
UPDATE: See this JSFiddle
The situation makes it appear a set height is necessary, therefor so my title. Feel free to adjust to something more suitable
The situation above is a replica of a to-build-situation and using exact pixels is (at that above part) not an option. Please don't advice 'use X pixels'.
Original: http://jsfiddle.net/o0Lfyt0m
Updated: http://jsfiddle.net/o0Lfyt0m/1/ (from code sample below)
The innerElement is trying to display as 17.5% as tall as the parent element. The problem is that the parent element does not have a defined height. As a fall back to calculating 17.5% of undefined, the div's height is essentially defaulting to "auto" and assuming the height of it's content, which is based on the size of the font, line-height, padding etc.
Edit: A nice feature of CSS is that an elements styles can be inherited from it's parents. You can add a structure class which will inhert the height from it's parent element, which seems to be your intent.
You could even add this class to the body element, since it's height and width are identical to html... just not certain if the HTML element can be styled in all browsers, so I didn't do that.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: 100%;
width: 100%;
}
.struct {
height: inherit;
width: inherit;
}
.innerElement {
height: 17.5%;
}
<div class="wrapper">
<div class="struct"> <!-- .struct inherits height/width from .wrapper -->
<div class="innerElement"> <!-- height calculated based on .wrapper -->
And just some untagged piece of text
</div>
</div>
</div>
Yes, you need to set the height 100% for that div too. Otherwise it's height is unknown and will not be able to take exactly the 100% height and innerElement height is not calculated accordingly.
To make sure, you must use the height 100% for that div too.
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
height: 100%;
}
.innerElement {
height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}
You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
I have 2 div inside a fixed-width container.
div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
Here's an example on jsfiddle.
Fully expanded as supposed to: http://jsfiddle.net/RuD74/
Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/
How can I achieve this?
Updated JFiddle: http://jsfiddle.net/d5U96/2/
I see what you are trying to do. Instead, set the second div to have:
#right {
overflow: hidden;
height: 100%;
background-color: blue;
}
By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.
A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.
#left {
float: left;
min-width: 50%;
max-width: 50%;
height: 100%;
background-color: red;
With this your div1 gets the minumum width of the helf of your block.
The only negative thing about this is, that you can't make it smaller in time, if you'd like.
Here's the sketch: http://jsfiddle.net/jondum/efVjj/20/
The goal is to have each of those divs on the same line.
If I add a fixed height to each of them it would appear to work, but I would like to avoid setting an explicit height on each element.
So how do I get those buggers all on the same line?
If you want to have them on one line horizontally, you can try to use display: inline-block with white-space: nowrap on a parent, so the blocks would be on one line: http://jsfiddle.net/kizu/efVjj/26/
You've set the width of the parent container at 400px and the three child divs each at 400px.
400 x 3 = 1200. Set the width of the parent container to at least the size of its child elements.
.main-container
{
width: 1200px;
}
One option is to use absolute positioning.
`
<div class="element" style="background:blue;position:absolute;left:0px;">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="element" style="background:green;position:absolute;left:400px;">
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="element" style="background:red;position:absolute;left:800px;">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
.main-container
{
width: 1200px;
overflow:hidden;
}
.element {
float:left;
width: 400px;
}