Is there a CSS equivalent to vmin that is relative to the smaller dimension of the parent element rather than the viewport?
I have a page with a navigation panel on the left, so only part of the viewport width is available to the main content, and I am trying to have a responsive square that does not overflow from the main <div>. I found the code for the responsive square as an answer to this question, but the square's height overflows when in landscape mode.
I could use JavaScript by listening to window resizing to recompute the square's width as the minimal dimension between the parent's width and height, but in my actual website, the parent is most of the time in display: none so it has no width and I would like to avoid the need to recompute the dimensions when it appears.
Here's a JsFiddle with an example and backgrounds to highlight the issue : https://jsfiddle.net/wy874pqv/4/.
Below is the code I used.
HTML :
<body>
<div id="main">
<div class="wrapper">
<div class="one-by-one aspect-ratio"></div>
<div class="content">
<div class="circle">
</div>
</div>
</div>
</div>
<div id="leftPanel">
</div>
</body>
CSS :
body {
height: 100vh;
padding: 0;
margin: 0;
}
div#leftPanel {
height: 100%;
width: 20%;
position: absolute;
left: 0;
margin: 0;
background: red;
}
div#main {
height: 100%;
width: 80%;
position: absolute;
right: 0;
margin: 0;
background: yellow;
}
.wrapper {
position: relative;
width: 100%;
background: rgba(0, 255, 0, 0.3);
}
.one-by-one.aspect-ratio {
padding-bottom: 100%;
}
.wrapper > .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10%;
}
.circle {
position: relative;
height: 100%;
border: dashed 1px;
border-radius: 50%;
}
Related
When I position a fixed div inside of a relative div, and align the fixed div to the bottom of the viewport, then attempt to scroll past the bottom in mobile Safari (iOS 13) I get a strange effect. It looks as though the div becomes obscured by a white rectangle. Is there any way to prevent this behavior without changing the position of the outer or inner divs?
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
<html>
<head>
</head>
<body>
<div class="outer">
<div class="inner">
test test test <br/> test test test
</div>
</div>
</body>
</html>
The .inner content goes outside the boundaries of the .outer wrapper.
You'd need to set overflow to visible on the .outer parent to make its content visible outside of its relative parent.
See the result : https://codepen.io/romainpetit/pen/BaNLaZr
Tested.
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
I have 2 divs in a row (with inline-blocks). One of them has a fixed width and the other one is supposed to automatically fill the left space. How can I do that?
My favorite solution is to use padding on the container block and absolute position on the fixed with object:
.wrapper {
padding-left: 100px;
position: relative;
}
.stay {
width: 100px;
position: absolute;
left: 0;
top: 0;
/* for demo */
height: 50px;
background-color: pink;
}
.fit {
width: 100%;
/* for demo */
height: 50px;
background-color: red;
}
HTML:
<div class="wrapper">
<div class="stay"></div>
<div class="fit"></div>
</div>
I need to code the following block. The main block is responsive, and it has 2 other blocks inside, one of them has a static width, and other is dynamic (the img). How to make an image a fluid width, but the static height inside the main container?
the screenshot is here — http://joxi.ru/9xcvUtg5CbAxZuPPZH4
It needs 2 wrapper divs, but it seems to work:
http://jsfiddle.net/LSRPk/2/
The HTML:
<div class="bonsai-kitten">
any<br>content<br><br><br><br><br><br><br>height
<div class="rubberimage">
<div class="vertical-centerer">
<img src="kitten.jpg">
</div>
</div>
</div>
CSS:
.bonsai-kitten {
border: 3px solid red;
position: relative;
}
/* image area next to the sidebar */
.rubberimage {
position: absolute;
left: 200px; /* assuming fixed sidebar width */
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.rubberimage .vertical-centerer {
position: absolute;
left: 0; right: 0; /* means width: 100%; */
top: 50%;
line-height: 10000px; /* large enough? */
margin-top: -5000px;
vertical-align: middle;
}
.rubberimage img {
display: inline-block;
vertical-align: middle;
width: 100%;
}
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}