I have one horizontally div on the top of my page with a height of 50px.
And now I want to put another div right below it which will fill the rest of entire page (should work with any kind of resolution).
Does anyone know how to do this only with CSS?
I'd appreciate any help. Thanks!
Although this is not stacking the div's it is very simple solution. Make a div that is 100% height and then place a div inside that is 50px in height.
<body style="height: 100%; width: 100%;">
<div style="height: 100%; width: 100%;">
<div style="height: 50px; width: 100%;">Header</div>
<!--Rest of Content-->
</div>
</body>
There are ways to do this. Here is an example using absolute positioning and a wrapper. Obviously ignore the colors-- they're just there so you can see what's going on.
<body style="margin: 0;height: 100%; background-color: yellow;">
<div style="background-color: green; height: 50px">top stuff</div>
<div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>
This is an example of a layout that is somewhat problematic with "pure" CSS but trivial with tables.
Firstly there is no way of expressing (ignoring CSS expressions, which you tend to want to avoid) "rest of the page" or "100% minus 50px" so the general solution to this problem is.
Create a container that is 100% height;
Put the header at height 50px;
The content simply takes up the rest of the space. Any styling is applied to the container not the content.
So:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
with:
html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }
It gets trickier if you want a footer. That is typically positioned absolutely at the bottom and padding is used on the container so nothing appears under it.
Related
How to make sidebar sticky on page scroll?
<div class="header">This is header</div>
<div class="row category-page">
<div class="category-filter col-2">Filter</div>
<div class="category-content col-10">ontent</div>
</div>
<div class="footer">This is footer</div>
I tried to do it with the position:sticky, but the result is not the same:
When the page is scrolled, only the content is scrolled. And when you scroll to the end of the content, the sidebar itself is already scrolling.
.category-filter {
position: sticky;
height: 100%;
top: 0;
}
The following is needed - when the page is scrolled, both the sidebar and the content should be scrolled. And which element ends first, that one should stick to the visible part of the screen.
Preferably in css, since I don't know how to work with js yet.
I really hope that I explained it clearly =))
Sticky position generally works fine in CSS, but it does not in one case: it looks up the node tree (HTML document) and if it sees any overflow: hidden in parent elements, it does not work.
See this codepen when it works.
Example
However, the same example does not work with overflow: hidden:
<div class="container">
<div class="box"></div>
<div class="box2"></div>
</div>
// CSS
.container {
height: 300vh;
width: 100vw;
background-color: aqua;
**overflow: hidden;**
padding: 20rem;
}
.box {
height: 20rem;
width: 5rem;
background-color: orange;
position: sticky;
top: 0;
}
I am trying to add a sticky element that stays on the bottom of the page only when it enters the viewport. The idea is that the element would be placed somewhere in the middle of the page and would not be shown immediately when the user visits the page.
Here's my progress so far:
div {
height: 300px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
height: 30px;
width: 100vw;
background: yellow;
}
<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: green;"></div>
<div style="background: blue;"></div>
The problem is that my code does the opposite of what I want it to do. The element should only stick past its original location.
Changing bottom: 0 to top: calc(100vh - 30px) on .sticky seems to work fine on desktop, but I noticed it's not adequate for Safari on iOS. With this 'hacked' solution, whenever the user scrolls up, the bottom bar increases in size and forces the sticky element to jump.
Sticky position can be a little confusing and frustrating at times.
The key to solving this problem is to keep in mind that a sticky element will appear at the top of its parent element. So by splitting or encapsulating the page's content into 2 sections we can create your desired outcome.
The first section contains content and no sticky element,
The second section contains content and the desired sticky element which will appear at the top of this element
We can decide where on the page the sticky element first appears by where we create the split between the 2 sections or more appropriately where the 2 section starts.
Below is example code where the sticky element appears in the middle of the page.
//
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
height: 30px;
width: 100vw;
background: yellow;
}
<!-- Content you want before the sticky element -->
<div>
<div style="height: 300px; background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
</div>
<!-- Content you want after the sticky element -->
<div>
<!-- The sticky element will appear as if its been placed here -->
<div style="height: 300px; background: green;"></div>
<div style="height: 300px; background: blue;"></div>
<div class="sticky">Sticky Section</div>
</div>
I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.
I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).
However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
and
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?
Set the container to position:relative in order to have the absolute to work.
To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>