I am using this layout for responsive div that maintains aspect ratio. It works well, but it requires overflow: hidden, to be clear it's padding-top: 56.25% defined in :after. If there is no overflow on wrapper, next element (in this case href link) is blocked.
My question is: is there a way to achieve same result without overflow: hidden on wrapper? I need some element to be visible outside wrapper without being cutting off.
Open snippet in full page if you can't see the issue within a small window.
#wrapper {
position: relative;
max-width: 1000px;
min-width: 350px;
max-height: 383px;
border: 1px solid;
/*overflow:hidden;*/
}
#wrapper:after {
padding-top: 56.25%;
display: block;
content: '';
background: rgba(0,0,0,.25);
}
<div id="wrapper"></div>
click me
You can add a inner div and make it responsive with a pseudo element like you did before, and apply overflow: hidden; on it. Then add another sibling div and set the style you wish to apply, it would be div #test in the example, as you see it will be visible outside the wrapper.
#wrapper {
position: relative;
max-width: 1000px;
border: 1px solid;
}
#inner {
min-width: 350px;
max-height: 383px;
overflow: hidden;
}
#inner:after {
background: rgba(0,0,0,.25);
padding-top: 56.25%;
display: block;
content: '';
}
#test {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100px;
height: 50px;
background: aqua;
}
<div id="wrapper">
<div id="inner"></div>
<div id="test"></div>
</div>
click me
Related
There are lots of card to be showed and I need to show menu when I hover one of the cards.
I use position: absolute; for menu and use position: relative; for the card, but why the scrollbar appeared when I hover on the card ？
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 240px;
width: 200px;
overflow: auto;
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
The scrollbar has nothing to do with your positioning, it is a result of overflow: auto; on your .box element.
overflow: auto; will show a scrolling bar if a child element overflows its parent container where overflow: auto; is set.
Seeing as the .box parent-element has a fixed size value height: 240px; while its child element .menu has height: 400px;, it will cause a scrollbar to appear because there is an overflow of 160px.
While #Yong is correct with document flow in his answer with the position: absolute; property, seeing as you have fixed height and width on all your elements, position: absolute; doesn't actually do anything in this exact reproducible example.
If I understand your problem correctly, a simple solution to your problem if you want to keep the fixed width and height on your .box element, you can simply disable the scrollbar by applying display: none; to the .box pseudo-element ::-webkit-scrollbar.
(NOTE: As of February 28th, 2022 this is still not supported in Firefox).
Read more about browser support at https://caniuse.com/?search=%3A%3A-webkit-scrollbar
Example with no positioning properties & -::webkit-scrollbar
.box {
height: 240px;
width: 200px;
border: 1px dashed red;
overflow: auto;
}
.box::-webkit-scrollbar{
display: none;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
/*position: relative;*/
}
.menu {
display: none;
height: 400px;
width: 200px;
/*position: absolute;
top: 0;
left: 0;*/
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
If you want to remove overflow altogether, you can apply overflow: hidden; to .box.
Keep in mind the fixed height of 400px on the .menu element will not apply as the fixed height of 240px on the .box element will hide the remaining 160px. I hope this solves your problem, but a little more detail would help!
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. -MDN
.menu is positioned absolute therefore it is positioned relative to .card which is the closes positioned ancestor to it.
relative
The element is positioned according to the normal flow of the
document, ... -MDN
And because .card is positioned relative it would still take space and position according to the normal flow of the document. Therefore, it would still be taken into consideration whether the .box or its parent would overflow or not.
with set position: absolute; for .menu and position: relative; for .card you able to change the position of .menu with top bottom left right properties relative to its first positioned (not static) ancestor element( .card position ).
but in your question, the absolute or relative position is not the cause of the scrollbar appear . The reason is the owerflow property .
the default value for owerflow is visible that create no owerflowing . And you created the scrollbar by setting it auto because the size of menu is larger than card.
.box {
height: 240px;
width: 200px;
/* overflow: auto; */
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I have seen some web design lessons that always start with a css like this:
body,html {
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
I'm trying to figure out what's the point of declaring attributes like width, height or display for body and html that are, if I'm not wrong, by default in browsers.
I thought it would be to prevent and undefined return or similar when accessing the css with js, but the result is the same when the attributes are defined in the css than when left to default:
console.log($("BODY").css('width')); // Always returns the width of the body
I also thought it could be to start the inheritance in cascade elements, but a div inside the body inherits the value just the same.
Anybody knows a solid reason for this approach? any browser / device issue I have missed? future compatibility? plain pedantry?
I'm kind of curious about it.
I found a good reason to define the html and body width and height to 100%. Say you want to vertically align a relative positioned div, you need to put it into an absolute positioned container:
html,
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="container">
<div id="main">
<h1>MY DIV</h1>
</div>
</div>
But, setting the body width and height to 100% you get an absolute positioned container that covers the whole window:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
background: lightgrey;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="main">
<h1>MY DIV</h1>
</div>
You get the same result, but it saves you a div element.
I know there are several similar questions answered here, but I can not seem to get this working.
I have two parent divs - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent divs to expand their height based on the image's height.
I have this working for the div with the black background, but I can't get the parent div with the border to expand it's size:
Here is the fiddle: http://jsfiddle.net/vpdj4kst/
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
position: absolute;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="image.png" />
</div>
</div>
This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements.
Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Remove position: absolute; from .builder_img and the parent containers will react to its height.
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />
</div>
</div>
I have a webpage header that I am trying to make overlap with a border. Here is a jsfiddle of a simplified version of what I have.
This is what I am aiming for: (The second row of images is what would happen if the page width is reduced.)
I tried using absolute positioning of the green (logo), but this causes the menu (yellow) to overlay with the logo instead of vertically stacking on the page like happens now.
My next idea was to give the border (red) absolute positioning, but in various attempts at that I always seemed to end up with the border at the top of the page, like the header div was ignoring the height of the logo/menu. That was set up something like:
#header {
position: relative;
}
#border {
position: absolute;
bottom: 0;
}
Any suggestions on how to set this up, either fixing what I have or trying a different approach altogether?
Edit:
Here's a better depiction of why I'm trying to do this, using the same colors (why the overlap and why the yellow menu should end up over the logo):
So something like this?
The green block is overlapped by the red border block.
Edit - Added percentage width and #media query so it resizes.
Have a fiddle!
HTML
<div id="header">
<div id="menu">
Contents
</div>
<div id="logo"></div>
</div>
CSS
#header {
width: 100%;
max-width: 700px;
min-width: 320px;
height: 200px;
position: relative;
background: blue;
}
#logo {
background: green;
height: 80px;
width: 190px;
position: absolute;
top: 80px;
left: 40px;
}
#menu {
height: 40px;
width: 300px;
background: yellow;
display: block;
position: absolute;
top: 80px;
right: 0;
}
#media screen and (max-width: 600px) {
#menu {
top: 30px;
}
}
#header:after {
content:'';
height: 80px;
width: 100%;
display: block;
position: absolute;
bottom: 0;
background: #F00;
}