If I have the following code, how can I make the second div take up the rest of the page?:
<div style="height:300px;">
blah
</div>
<div style="?">
</div>
For example, if the user's browser window's height is 1000px, then how can I make the second div 700px?
This is an approach you could take:
Make the first <div> a child of the second <div>
Give the outer <div> some padding equal to the height of the inner <div>
Use position: absolute; to get the inner <div> snapping to the top of the page
Now the outer <div> will act as the bottom <div>.
Example:
<style type="text/css">
div#outer
{
padding-top: 300px;
}
div#inner
{
position: absolute;
top: 0;
background: yellow;
display: block;
height: 300px;
width: 100%;
}
</style>
<div id="outer">
<div id="inner">
top content
</div>
bottom content
</div>
http://jsfiddle.net/Eq8Jq/1/
If absolute positioning is not a problem, you can do it like this:
<div style="position: absolute; top: 0; left: 0; right: 0; height:300px; background-color:yellow;">
Foo
</div>
<div style="position: absolute; top: 300px; left: 0; right: 0; bottom: 0; background-color: red;">
Bar
</div>
You can use on div2 style = "height: 100%". However, this only works if the container also has a height specified. If this is just in your main body then set body { height: 100%; } also
The key is style="height:100%" for the second div as mentioned by mrtsherman.
<div style="height:300px;background-color:yellow">
blah
</div>
<div style="clear:both;height:100%;background-color:red;">
Second div
</div>
The second div will have red BG for the rest of the page.
If this is not what you want, let us know.
Related
I've created a sidebar, where I have three container elements. I want them to be sticky as the user scrolls through the page and when the user reaches the footer I want these elements to behave like normal elements and not overlap with each other.
Here is the code representing the problem. How to resolve this overlapping issue?
<div class="sidebar">
<div class="sidebar-subscription-form-container">
<div class="sidebar-subscription-form">
<p>I would hold all the subscription form elements</p>
</div>
</div>
<div class="social-buttons-container">
<div class="social-buttons">
<p>
I would contain all the social buttons
</p>
</div>
</div>
<div class="sidebar-banner-container">
<div class="sidebar-banner">
<p>
Here is the sidebar banners
</p>
</div>
</div>
</div>
.sidebar-subscription-form-container {
top: 0px;
height: 30px;
z-index:1;
position: sticky;
}
.social-buttons-container {
top: 400px;
height:30px;
z-index:1;
position: sticky;
}
.sidebar-banner-container {
top: 800px;
height:30px;
z-index:1;
position: sticky;
}
https://jsfiddle.net/nirmalkumar1997/L0yd5hq1/84/
Since you have hardcoded the height values of each element, why not simply offset the top property in each element by the height value times the number of elements down it is:
.sidebar-subscription-form-container {
top: 0px;
height: 30px;
z-index: 1;
position: sticky;
}
.social-buttons-container {
top: 400px;
height: 30px;
z-index: 1;
position: sticky;
top: 30px;
}
.sidebar-banner-container {
top: 800px;
height: 30px;
z-index: 1;
position: sticky;
top: 60px;
}
<div class="sidebar">
<div class="sidebar-subscription-form-container">
<div class="sidebar-subscription-form">
<p>I would hold all the subscription form elements</p>
</div>
</div>
<div class="social-buttons-container">
<div class="social-buttons">
<p>
I would contain all the social buttons
</p>
</div>
</div>
<div class="sidebar-banner-container">
<div class="sidebar-banner">
<p>
Here is the sidebar banners
</p>
</div>
</div>
</div>
I added 30px for the second element, and 60px for the 3rd element.
To make this more dynamic, you could use a CSS custom property to keep everything in sync if you make changes to height, and run a calc on the element offset * height.
::root {
--container-height: 30px
}
.sidebar-subscription-form-container {
top: calc(var(--container-height) * 0);
height: var(--container-height);
z-index: 1;
position: sticky;
}
.social-buttons-container {
top: 400px;
height: var(--container-height);
z-index: 1;
position: sticky;
top: calc(var(--container-height) * 1);
}
.sidebar-banner-container {
top: 800px;
height: var(--container-height);
z-index: 1;
position: sticky;
top: calc(var(--container-height) * 2);
}
<div class="sidebar">
<div class="sidebar-subscription-form-container">
<div class="sidebar-subscription-form">
<p>I would hold all the subscription form elements</p>
</div>
</div>
<div class="social-buttons-container">
<div class="social-buttons">
<p>
I would contain all the social buttons
</p>
</div>
</div>
<div class="sidebar-banner-container">
<div class="sidebar-banner">
<p>
Here is the sidebar banners
</p>
</div>
</div>
</div>
The problem with your code is the height of section class.
As the nearest block-ancestor to all the three containers is section, they will stick as soon as they hit the edge of the section class.
According to Mozilla Documentation
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
You can find the entire info here - Link
For achieving sticky behavior and removing overlapping of containers, you can try to increase the height of section class. For example -
.section {
height: 4000px; // Needs greater value as top is 400px and 800px for children elements.
}
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
I have the following code
<body>
<div style="height: 35%; background-color: black;"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
</div>
</div>
</body>
Ideally, I would like the top portion of the page to be a certain color (black in the example), and I want the header area (which contains the <h1> and <h3> elements) to be inside the black box. Then I would like the first paragraph of the content to also be included inside the black box. Very similar to this picture:
What is the best way to go about this?
The simplest way is to use an absolute positioned pseudo element on the header
Stack snippet
body {
background-color: #ddd;
margin: 0;
}
#header {
position: relative;
color: white;
background-color: black;
}
#header::before {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 60px;
width: 100%;
background-color: inherit;
}
#header div {
width: 80%;
margin: 0 auto;
padding: 10px;
}
#content {
position: relative;
width: 80%;
margin: 0 auto;
background-color: white;
}
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
<p>
Thre
</p>
<p>
Fou
</p>
</div>
</div>
Three steps:
Apply a gradient background to the <body>.
Create two sectioning elements: <header> and <section>
Ensure all the relevant elements in <header> and at the top of <section> have an explicitly declared height in pixels which, combined, match the height of the first part of the gradient.
Make sure that the html and body have height: 100% or min-height: 100% otherwise height 35% is not going to be 35% of the viewport height.
You can make the black background with an absolute positioned element. I suggest to look into css position(relative, absolute, fixed, static).
Here's a demo and the code:
https://jsfiddle.net/n617L6rh/
<div id="bg"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>One</p>
<p>Two</p>
</div>
</div>
html,
body {
height: 100%;
}
#bg {
height: 35%;
background: black;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#header {
height: 35%;
color: #fff;
position: relative;
}
Here's my html
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div>
<div class="float float_txt">
text here!
<p class"a_p">a</p>
<p class"b_p">b</p>
<p class"c_p">c</p>
</div>
</div>
</div>
and css
.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}
http://jsfiddle.net/MdtR8/1/
.container has a dynamic width (responsive design) and image will auto-resize itself.
I need to have .float_txt at same height as image, but I need a REAL height because I must divide a b c in percentage. Example:
.a_p, .b_p{height: 20%}
.c_p{height:60%}
How I can to this? only css no js :S
Why don't you solve it with JQuery. Here is the example of JQuery to calculate the height of .float img and add it to float_txt height.
$(".float_txt").css({
'height': $('.float img').height()
});
It's just one solution using JQuery. It's absolutely easier than using only css.
Jsfiddle
Here's one of the approaches.
I don't consider it to be the answer neither an elegant solution but this is one of the workarounds which actually meets the most important condition - it works (with some restrictions).
Here's the fiddle
First, we must assume that everything inside the .float_txt will be wrapped within those three paragraphs - they're meant to be 20%, 20% and 60% which is 100% all together so there's no more space for any other elements. Next, we wrap all three paragraphs with a div and put a copy of the image next to this div. We'll add the id="speculate" to the image.
The whole HTML will look like that:
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div><div class="float float_txt">
<img id='speculate' src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
<div class='content'>
<p class="a-p">a</p>
<p class="b-p">b</p>
<p class="c-p">c</p>
</div>
</div>
</div>
</div>
We'll use the #speculate image to set the height of the .float_txt div. The image will have visibility: hidden which makes it invisible but still occupying_ the space in its container. The .content div will be positioned absolutely and spread to the whole space of the .float_txt with top:0; right:0; bottom:0; left:0.
The paragraphs will be also positoned absolutely and placed with the top property. The disadvantage here is the fact that we must know the percentage heights of the preceding paragraphs, e.g. to position the second paragraph we must set top: 20% because the first paragraph has height: 20%. I hope it's clear.
The whole CSS will look like this:
.box {
display: inline-block;
}
.float {
display: inline-block;
width:50%;
}
.float img {
width: 100%;
height: auto;
}
.float_txt {
background: red;
position: relative;
}
#speculate {
width: 100%;
visibility: hidden;
display: block;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content p {
margin: 0;
position: absolute;
}
.content .static {
position: static;
}
.a-p {
height: calc(20% + 20px);
top: 20px;
}
.b-p {
height: 20%;
top: calc(20% + 20px);
}
.c-p {
height: 60%;
top: calc(40% + 20px);
}
I'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}