I have a div positioned absolutely with a height: 100vh. It has also a shadow. No I would like to give it a 20px margin bottom in order to see the bottom shadow. Is that possible? any trick?
jsfiddle
<div class="container"><div class="aux"></div></div>
body {
margin: 0;
}
.container {
width: 300px;
height: 100vh;
background: yellow;
margin-bottom: 100px;
box-shadow: red 10px 10px 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
position: absolute;
}
you can use calc() and subtract 20px from height
height: calc(100vh - 20px);
Another approach, without using calc() but changing the markup, is to introduce an inner container, like so
<div class="container">
<div class="inner">
...
</div>
</div>
and this css
.container {
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
width: 300px;
height: 100vh;
padding : 0 20px 20px 0; /* we create room for the box shadow inside the
container. Padding is included in the height
due to the box-sizing property
*/
}
.inner {
width: 100%;
height: 100%;
background: yellow;
box-shadow: red 10px 10px 10px;
}
Example: http://jsfiddle.net/sp9bh/2/
[1]: http://caniuse.com/#feat=calc
Why not just add 20px to the bottom margin?
margin-bottom: 120px;
Related
I'm having the issue that I want my container to have width 950px if possible - but if the window is resized then it will reduce down to the size of the window accordingly, currently if the window is resized it requires horizontal scrolling to see entire wrapper & container - what am I missing?
.wrapper {
max-width: 950px;
margin-right: 32px;
}
.container {
background-color: teal;
padding: 48px 64px 48px 64px;
border: 1px solid grey;
width: 100%;
min-height: 414px;
}
<div class="wrapper">
<div class="container"></div>
</div>
Add box-sizing: border-box; to include the padding in the width, otherwise it will be added to the 100%, therefore exceeding the parent width.
.wrapper {
max-width: 950px;
margin-right: 32px;
}
.container {
box-sizing: border-box;
background-color: teal;
padding: 48px 64px 48px 64px;
border: 1px solid grey;
width: 100%;
min-height: 414px;
}
<div class="wrapper">
<div class="container"></div>
</div>
You need to combine %-based width and pixel-based max-width for that, try this:
.wrapper {
width: 90%;
max-width: 950px;
margin: 0 5%;
}
I have a container that has some top/bottom padding - it can't be removed or swapped for margin.
I'm trying to create a faux border (blue line) to the right hand side of the green box using a pseudo element.
The yellow area only exists to show that the green box has padding (I've clipped the background).
The issue I have is that when I use a height of 100% on the pseudo, it inherits the full height of the parent including padding, however I only want my border element to be the same height as the green box.
I CAN get the padding size (and I know how to use the calc function) but it would involve numerous media queries because the padding is fluid, and I'm trying to avoid it.
So, I was wondering whether there was any other way to make the blue border the same height as the green box.
.container {
margin: 25px;
}
.box-wrapper {
background-color: yellow;
}
.box {
box-sizing: border-box;
height: 200px;
width: 200px;
padding: 40px 0;
background-color: lime;
background-clip: content-box;
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 5px;
background-color: blue;
right: -20px;
}
<div class="container">
<div class="box-wrapper">
<div class="box"></div>
</div>
</div>
You can inherit the same padding and also clip the background:
.container {
margin: 25px;
}
.box-wrapper {
background-color: yellow;
}
.box {
box-sizing: border-box;
height: 200px;
width: 200px;
padding: 40px 0;
background-color: lime;
background-clip: content-box;
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
top:0;
height: 100%;
width: 5px;
background-color: blue;
background-clip: content-box;
padding:inherit;
box-sizing: border-box;
right: -20px;
}
<div class="container">
<div class="box-wrapper">
<div class="box"></div>
</div>
</div>
I have a container and children elements. The container is positioned fixed with 10% height. Each child element must have 100% height and width equal to its height - this gets even more complicated when I add that my container is expanding horizontally not vertically. I would like to ask if this is possible using CSS because with JavaScript it could be easily achieved but I'd have to listen for window resizes which is a pain and I would like to avoid that.
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
}
.container > div {
display: inline-block;
height: 100%;
width: 50px;
border-radius: 50%;
border: solid 1px black;
}
https://jsfiddle.net/fdtajx3k/1/
The following might do the trick for you.
On your child div elements, use viewport units vh for both the width
and height values.
Also, add some bottom padding (optional) on your parent container if the scroll bar is an issue.
Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths
html,
body {
height: 100%;
}
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
padding-bottom: 30px;
}
.container > div {
display: inline-block;
height: 10vh;
width: 10vh;
border-radius: 50%;
border: solid 1px black;
box-sizing: border-box;
}
<div class=container>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
I have code like this:
https://jsfiddle.net/y09dngnj/1/
<div style="border: 1px solid green">
<div class="biddingStat" id="biddingStat0"
style="background-color: #DC0707;opacity: 1;
text-align: center; ">10000
</div>
</div>
.biddingStat {
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
If you change css from padding-top: 20px to padding-top: 5px and rerun fiddle, although there is height 100px of red div, the height changes. I'd expect that text would change its position to be more distant from top edge but height of div would stay 100px no matter what.
How to keep 100px height of div and have text padded from top?
Change padding-top to margin-top in the CSS file.
See: CSS Box Model
<div style="border: 1px solid green"><div class="biddingStat" id="biddingStat0" style="background-color: #DC0707;opacity: 1;text-align: center; ">10000</div></div>
<style>
.biddingStat
{
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
margin-top: 150px;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
</style>
If you don't want padding to affect the dimensions of an element you can use box-sizing: border-box; which will allow the div to not be affected by any padding or borders added to it.
I have a div inside another div. The outer div has a given width, but max-width should be 100%. The inner div is resizable but somehow the outer div doesn't seem to care whether or not the inner div gets wider. A scrollbar is displayed instead of sizing with the inner box to a maximum of 100%.
This fiddle demonstrates the issue; how can I have a div with a given width in px, set the inner div to resizable and have the outer div listen to the inner div's current width and size up to a maximum of 100%?
JSFiddle with the example
HTML
<div id="outer">
<div id="inner">resize me...</div>
</div>
CSS
#outer {
overflow: auto;
width: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
resize: both;}
Add the following CSS (or replace it):
#outer {
display: inline-block;
width: auto;
}
#inner {
width: 200px;
}
Live preview: JSFiddle
You should remove "width: 200px;" and add "float: left;" to "#outer"
Here is the code:
#outer {
overflow: auto;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
float: left;
}
see if this helps.
body {
padding: 0;
margin: 0;
}
#outer {
/* min-width: 200px;*/
/* max-width: 100%; */
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
display: inline-block;
box-sizing: border-box;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
max-width: 100%;
resize: both;
}
<div id="outer">
<div id="inner">resize me...</div>
</div>