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>
Related
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
I've three child div and wanted that middle div to ignore width of parent div and take full screen width (yet it needs to maintain its position below first div)
You can define the middle child width a width defined in vw:
.parent {
width: 100px;
height: 40px;
background: blue;
}
.child {
width: 100%;
background: yellow;
}
.overflower {
width: 100vw;
background: red;
}
<div class=parent>
<div class=child>child</div>
<div class=overflower>overflows</div>
<div class=child>child</div>
</div>
Solved this issue by using position: absolute tag. See JSfiddle at: https://jsfiddle.net/sachingpta/3qu3m466/. Sample code
`
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 300px;
height: 100%;
background-color: grey;
margin: 0 auto;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
position: absolute;
left: 0px;
right: 0px;
}
.child3{
background-color: blue;
}
`
Here's the HTML:
<div class="root">
<div class="oval">
<div class="val"></div>
</div>
</div>
and here's the relevant CSS, so far:
.oval {
box-sizing: padding-box;
width: 200px;
height: 100px;
border: 10px solid black;
border-radius: 60px;
position: relative;
}
.oval .val {
width: 93%;
height: 100%;
position: absolute;
}
Go here to see what it looks like at the moment.
I want to mask the square corners of the .oval .val element, so that they appear to be behind the "opening" suggested by the .oval element's border.
The right edge of .oval .val element should run vertically from top to bottom, without any rounding.
NOTE: The width of the .oval .val can be anything between 0% and 100%, including problematic values such as 93%.
Add overflow: hidden; to the .oval class.
Add
.oval {
overflow: hidden;
}
to your CSS.
To explain this, I've added a background-color to .val class
.oval {
box-sizing: padding-box;
width: 200px;
height: 100px;
border: 10px solid black;
border-radius: 60px;
position: relative;
overflow: hidden;
}
.oval .val {
width: 93%;
height: 100%;
position: absolute;
}
.val {
background-color: red;
}
<div class="root">
<div class="oval">
<div class="val"></div>
</div>
</div>
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;
In my web page I have top and bottom sections which are fixed with CSS, position: fixed;
Between the top and the bottom I have an absolutely positioned page element - a div - and this is where most of my content appears. When the content is too big for the page element, I want it to overflow on the y-axis. In this case, I want the scroll bars to appear on the very right of the screen, (not the page element), so I have overflow-y: scroll; on the body element. (See facebook for an example).
Now, this works fine except for the borders and background of the page element. The content which is initially within view has both border and background, but when I scroll down to the overflow area, it has neither.
I have tried setting the height of the page using absolute (bottom: 105px) and relative (height: 100%;) methods, but neither works. I also tried ending the content inside the page element with <p style="clear: both"></p>.
Any ideas? Thanks!
The problem is most likely the height: 100%; actually. When you the background-color is filled in, it fills it 100% of the way (visible area). The problem is that since the overflow goes past the 100%, the background-color doesn't stick.
Instead of using height:100%, put a min-height of whatever you want your absolutely positioned element to be. That way when the background-color fills it in, it fills the whole thing because the overflow is always going to continue to be above that minimum height.
EDIT: I realize a big block of words for an answer is annoying. More concisely:
You had:
.middle {height:100%;}
Get rid of that and change it to:
.middle {min-height:100%;}
I'm not quite sure what you are wanting with your borders. This fiddle has borders at the top and bottom of the content only with this code:
HTML
<div class="top">Top</div>
<div class="middle">
<div class="content"></div>
</div>
<div class="bottom">Bottom</div>
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
}
.middle {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 100px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 100px;
}
This fiddle has borders constantly around it with this code (same html as above):
CSS
.top,
.bottom {
position: fixed;
height: 100px;
top: 0;
left: 0;
right: 0;
background-color: red;
border-bottom: 10px solid black;
z-index: 1;
}
.bottom {
bottom: 0;
top: auto;
background-color: blue;
border-top: 10px solid black;
border-bottom: 0;
}
.middle {
position: absolute;
top: 110px;
left: 0;
right: 0;
bottom: 110px;
}
.content {
width: 100%;
height: 1000px;
background-color: yellow;
border-right: 10px solid black;
border-left: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 110px;
}