This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed 5 years ago.
I have made a splitter which works perfectly in Chrome.
However, it does not work in Safari. But if we change the height in .handle-inner from 100% to 400px, we will observe that the splitter (from the top down to 400px) becomes draggable. That means it is height:100% which did not work in Safari.
Does anyone know how to amend the code to make the splitter work in both Chrome and Safari?
Edit 1:
I made a more complex example which has similar structure as my real program. In my real program, I do not fix the height as 500px, I use the whole screen, and don't want to exceed it. Here is the splitter which works perfectly in Chrome, but height:100% does not work in Safari.
Here is the version with height: 100vh. We could see the height is too much in both Chrome and Safari. However, we do NOT know how to set max-height.
Your flex container (.flex-box) has a defined height of 500px.
Your splitter (.handle-inner) has a defined height of 100%.
However, .handle, which exists between them, does not have a defined height. Safari sees this as a missing link, which it considers a violation of the spec, which essentially says:
The parent of an element with a percentage height must have a defined height and it must be with the height property. Otherwise, the element with a percentage height must default to height: auto (content height).
Therefore, you need to add height: 100% to .handle.
Also, in your body element, you not only have your .flex-box element, but you also have a nav element with height: 250px. Depending on how a browser handles the overflow (250px + 100%), this may cause your splitter element to disappear off-screen, which is happening in Safari.
To avoid that problem, make these adjustments to your code:
* { box-sizing: border-box; } /* include borders and padding in width
and height calculations */
.flex-box { height: calc(100% - 250px); } /* compensate for nav height */
revised demo
Also, being that body is a column-direction flex container, you can also use flex properties (such as flex: 1 on .flex-box) to consume remaining space. You may not even need percentage heights. See my answer here for details.
revised demo
Try changing your height in .handle-inner from 100% to 100vh. Set it up like this with a fall back:
.handle-inner {
width: 10px;
margin-left: -5px;
height: 100%;
height: 100vh;
}
Edit: Replace your CSS with this
.flex-box {
display: flex;
width: 100%;
height: 500px;
}
.flex-box .col {
border: 1px solid grey;
flex: 1;
}
.handle {
width: 1px;
text-align: center;
background: grey;
transition: all ease-in 0.1s;
}
.draggable {
background: grey;
}
.handle {
width: 0.0000001px;
transition: all ease-in 0.1s;
z-index: 999;
background: grey;
}
.handle-inner {
width: 10px;
margin-left: -5px;
height: 100%;
height: 100vh;
}
If you are experiencing overflow, like you stated. Try a height/max-height property.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
Hey guys I'm trying to create a circle with bg color. But based on my style that I attached above is not working properly. It didn't take height. Can you please tell me why? Thanks :)
You need to declare a height for a parent element to be able to use %-size on the children.
like for example:
.parent{
height: 666px; //or any %-value if the grandmother height is defined trailing back to the html-element
}
Check this fiddle out:
https://jsfiddle.net/n1o8057L/1/
It is always recommended to mention height to the parent/grandparent before you use height:100% to a child element
Try this
.circle {
max-width: 150px;
width: 100%;
max-height: 150px;
height: 100%;
display: block;
background: #ff4040;
border-radius:50%;
}
body{
height:100vh;
position:relative;
}
<div class="circle"></div>
If you still don't want to mention height to the body element(parent) you can define them like this
Because by default the div elements' were block elements
Block elements always have 100% width but not a definite height
so define the max-width the actual size and set its width to 100% so that it won't escape the given width.
But when it comes to height divs don't have heights by default so here set height or min-height to your required value and add max-height:100% (optional)
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can)
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
.circle {
max-width: 150px;
width:100%;
max-height: 100%;
min-height:150px;
display: block;
background: #ff4040;
border-radius:100%;
}
<div class="circle"></div>
I'm trying to put two divs with 50% width beside one another, they are inline-blocks.
The problem is, I also wish to add other elements that affect the width, such as margin, padding, borders, etc. I am quite alright to have a few pixels to be hidden off the side of the window. (In fact, I'd prefer it)
Whats the trick exactly?
How can I have two inline divs that don't stack on top of each other when they hit the maximum width of their parent. Is there some default positioning that inline-blocks have?
EDIT: Here is an example of code. It seems rather simple to me, but they just wont line up.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
}
.child {
display: inline-block;
overflow: hidden;
position: relative;
width: 50%;
height: 100%;
margin: 1px;
}
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>
The reason they won't stack is because you have set the margin to 1px and then the width to be 50% of the available width. So each child was in fact 50% + 1px + 1px (for left and right) in width which would exceed the available width of 100% by 4px.
Try either with padding, or margin, or reduce the width of the parents. You could also do:
width: calc(50% - 2px);
Also, the nature of inline-block makes it trickier to align elements next to each other if they add up to exactly (or near) 100%.
You can solve this by either setting the parent to have a font-size of 0 and the children to anything greater than 0. Or, you could set each child to float: left
Demo 1 (using floats)
Demo 2 (using floats, and calc())
Demo 3 (setting font-size to 0)
For padding and borders you can use box-sizing: border-box; on your child element.
border-box: "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
source: box-sizing
I think for margin you need to cut some space off your .children. For example: width: 49.5%; margin: 1%;
As Mike suggested, try to use box-sizing: border-box.it will work only if you specify padding instead of margin.
But in this case, even with padding and border-box, still you would not be able to place them side by side as inline-block elements create a small gap in between..
More you can find out https://css-tricks.com/fighting-the-space-between-inline-block-elements/
If you are ok with few pixels to be hidden off the side of the window, you can add white-space: nowrap; to the parent.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
white-space:nowrap;
}
.child {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
margin: 1%;
}
For the record, these solutions seemed to be the most reliable:
width: calc(50% - 2px) (Worked with float: left;)
border-sizing: border-box; (Worked with border: 1px solid #fff;)
white-space: nowrap; (worked circumstantially.)
Thank you to everyone who has contributed.
This was the sort of clarity I was looking for. Knowing multiple ways to solve this issue is abundantly helpful.
I'm currently working on my very first responsive webdesign working with Bootstrap 3.
What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.
The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.
You can see the problem in this jsfiddle:
http://jsfiddle.net/usD2d/
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
li img {
width: 100%;
min-height: 100%; /* destroys aspect ratio */
}
If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.
Surely I could use #media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.
Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?
Thank you very much in advance!
If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.
example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.
ul {
width: 100%;
}
li {
display: block;
float: left;
width: 24%;
height: 150px;
overflow: hidden;
border: 1px solid black;
text-align:center;/* set image in center */
line-height:150px;/* set image or text right in middle;*/
}
img {
min-width: 100%;
vertical-align:middle;/* okay see it in middle , but you can tune this */
margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}
the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.
This a CSS cropping.
I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
to
li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}
I've spent 2 days trying to sort this out and I can't. I'd appreciate any help.
I have a container set to fill 100% vertically, which it does just fine. In the container I have another div for my header. Underneath the header, I want another div to also fill vertically 100% (from the bottom of the header to the bottom of the screen) regardless of how little content there is. The problem is, when I set the height for this div at 100%, it overflows past the bottom of the browser window, even if there is no other content in it. Just a long blank space. The overflow is the same size as my header.
If I remove my header, it works fine. And if I tell this div to not be 100%, then it will only go as deep as the content forces it, which won't be enough in some cases. I tried using overflow: hidden, but then that hides the shadow effect I have on the div.
You can view the page here
And the code in question is here:
#container {
height: 100%;
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: -80px;
}
#bodybox {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: -80px;
background-color: #FFF;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}
You'll notice my footer is hovering over the bottom. That's because of the overflow. I'm using this sticky footer solution in case that's important.
I'm a bit of a novice at CSS and I really want to avoid excessive Photoshop usage or tables, but I can't seem to get any tip or suggestion I've read to fix this. Please help. Thanx.
try
#bodybox{
height: calc(100% - 142px);
...
where 142px is the height of the header. Calc calculates the height according to the arithmetic in the parentheses. Note the equation will not more without the spaces before and after the operator. The same equation can be used to counter the effect of margins too.
If you set an element to have a relative height/width (with percentages), the height/width will be relative to it's direct parent (if some exceptions do not apply, I will not explain them here). But that doesn't take positioning into account. So your content div has exactly the height you asked it to be, but because it is pushed down by the header it appears to be taller.
You could use calc to calculate the height you want, or use the oldschool push back method.
You start with building the container, header and content div:
<div class="conatiner">
<div class="header"></div>
<div class="content"><h1>My Content</h1></div>
</div>
And apply some styles:
.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }
And to push back you add to the styles of the .content div: margin-top: -100px;, where the 100px should be the same height as the header. With the minus in front you tell the browser to pull it back instead of push it down.
Now you have two more problems to solve. The first one is that the content div covers the header div. You can fix that with applying z-index, although that requires you to add position too (as z-index only applies to positioned elements). So add those two rules to both header and content:
z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */
Now we're almost there, but as you might see the content also disappears behind the header. To fix this, add a padding to the content div:
.content { padding-top: 100px; } /* again the 100px should be the same as the header height */
And now don't despair if you see the content div pushed down again. That is because the padding adds up to the height. Luckily my great friend box-sizing helps us out!
.content { box-sizing: border-box; -moz-box-sizing: border-box; }
And here we are (fiddle)!
Note: there are some other strategies, like, absolute positioning of the content div and/or header, using the calc functions, and others. Choose what suits you best.
Quick fix:
#header_bkgd {
overflow: hidden;
}
I'm guessing its to do with the fact that they both have a margin-bottom of 80px? one is taking off the other forcing it to overflow.
Do this:
CSS:
#bodybox{
margin-bottom: -80px; //Remove
// rest of the css
}
#container {
margin: 0
}
I have the following:
#sbr {
float: left;
min-width: 200px;
overflow: hidden;
width: 200px;
}
and
<div id="sbr"></div>
The <div> is currently empty. I want to follow this <div> with another, so the minimum width of my first <div> must be 200px, however it seems not to work. Am I doing something wrong? Why does my first <div> seem to have no width?
It's working actually, try to put min-height too and some background to see the changes:
#sbr {
background:blue;
float: left;
min-height:200px;
min-width: 200px;
overflow: hidden;
width: 200px;
}
However, this won't work in IE (some versions), IE is having a problem in min-height or min-width. The min-height and min-width for IE is the height and width, but if you put width and height to your style, other browsers will fix your div to height and width specified. What you can do is to use the underscore hack:
#sbr {
background:blue;
float: left;
min-height:200px; /* This is min-height to other browser */
min-width: 200px; /* This is min-width to other browser */
_height:200px; /* This is min-height to IE, only to IE */
_width:200px; /* This is min-width to IE, only to IE */
overflow: hidden;
width: 200px;
}
If you have empty div tags with requirements for min height/width, then perhaps you should use absolute positioning in CSS instead of keeping the div tags in the document flow.