I have 3 boxes inside a container and I'm trying to have the same height for each box but the height 100vh or height : 100% one doesn't work correctly. Do you have any idea why? I tried on a different browser and OS and I still have the same result. The Green box doesn't reach the height desired.
/* ALL SETTINGS */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: var(--size-box);
-moz-box-sizing: var(--size-box);
box-sizing: var(--size-box);
}
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
max-width: 100%;
height: 100vh;
}
.wrapper .box {
width: 100%;
height: 100vh;
}
.box:nth-child(1){
background-color: blue
}
.box:nth-child(2){
background-color: green
}
.box:nth-child(3){
background-color: red
}
<html>
<body>
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
What about this one? Adding 33% width to boxes and making them inline-block aligns them horizontally. I removed the rule * because it is too aggressive. Using too aggressive rules without clear intention seems bad practice.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
max-width: 100%;
height: 100vh;
padding: 0;
}
.wrapper .box {
width: 33%;
height: 100vh;
display: inline-block;
margin: 0;
}
.box:nth-child(1){
background-color: blue
}
.box:nth-child(2){
background-color: green
}
.box:nth-child(3){
background-color: red
}
Related
I'm trying to get three divs side-by-side horizontally. I want the left-most div to scroll, so the gradient reveals itself as the user scrolls. For some reason the divs aren't adjacent and the left one isn't scrolling, and I don't know why.
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}
.overall {
height: 100%;
}
.scroll {
width: 10%;
height: 200%;
background: linear-gradient(#e66465, #9198e5);
overflow-y: scroll;
}
.one {
width: 70%;
height: 100%;
background: lightgreen;
}
.two {
width: 20%;
height: 100%;
background: lightblue;
}
<div class="overall">
<div class="scroll"></div>
<div class="one"></div>
<div class="two"></div>
</div>
They are not placed horizontally because div's are block-level elements by default, meaning they occupy the entire row / width of the screen.
Nowadays typically, if one needs to place them horizontally, he/she does it with the Flexbox or display: flex set on the parent element. Of course there are also other ways of doing it.
And for the scrolling, it doesn't scroll because there's nothing to scroll. Put some "tall" enough content (which is greater than the set height of 200%) inside the .scroll div and see it in "action":
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}
.overall {
display: flex; /* displays flex-items (children) inline by default */
height: 100%;
}
.scroll {
/*width: 10%;*/
flex: 1; /* flexbox way of defining width */
height: 200%; /* necessary ? */
background: linear-gradient(#e66465, #9198e5);
overflow-y: auto; /* modified, only shows the scrollbar when needed */
}
.one {
/*width: 70%;*/
flex: 7;
/*height: 100%; not necessary, takes the parents height */
background: lightgreen;
}
.two {
/*width: 20%;*/
flex: 2;
/*height: 100%;*/
background: lightblue;
}
<div class="overall">
<div class="scroll">
<p style="height: 250%">Some looooong paragraph which is taller that its parent...just for demo...</p>
</div>
<div class="one"></div>
<div class="two"></div>
</div>
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target รท context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).
I made a picture to make it more clear: https://i.imgur.com/qVLb1bl.png
<html>
<div id="container">
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</html>
CSS:
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }
#container { display: flex; flex-direction: column; height: 100%; }
.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }
.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }
I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb
Anyone know the solution?
Thanks!
Since you are already using flexbox layout. There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container).
Just give:
.content{
-webkit-flex-grow: 1;
flex-grow: 1;
/** remove height **/
}
and remove height from .content.
Specify the decire height of the html page. Else the page is high enough to fit all of ur element;
html, body { height: 1000px; }
Use min-height: 100%; for html and body instead of height: 100%;
Updated answer:
html height should be set as min-height so it can grow when needed. But thanks to this body does not know the theight of parent (html) element and so we can't use % based min-height there anymore.
Thankfully we have viewport units. So for body set min-height: 100vh; This tells body to be minimally 100% of viewports height.
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; }
PS! You also need to remove margin from body with this solution. Or there will be a scrollbar visible always.
Put background in body pseudo element and align it there.
body {
...
position: relative;
min-height: 100%;
...
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: url("http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg")
no-repeat bottom center;
pointer-events: none;
z-index: -1;
}
Here is a codepen: codepen.io/anon/pen/vpEgxo
Hope this will help ;)
I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div>
I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.
Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.
.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.
See snippet for a clear example what I've been struggling with.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sb {
height: 100%;
width: 300px;
background: blue;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
Added an extra .wrap.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
padding-left: 300px;
}
.sb {
height: 100%;
width: 300px;
background: blue;
margin-left: -300px;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="wrap" id="wrap">
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
</div>
https://jsfiddle.net/afelixj/tb3pbam9/
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}