I have a div whose size depends on its content.
I want to have an absolute child which takes the whole space.
In Firefox I get the wanted result but not in Chromium.
How to fix it?
Which browser is rendering against the specification?
<div style="position:relative;float:left;">
<div style="position:absolute;display:table;left:0;top:0;height:100%;width:100%;background:red;">
<div style="display:table-cell;vertical-align:middle;">TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
You just need to change the display of this div to display:flex and use margin: auto to center the text:
<div style="position:relative;float:left">
<div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;">
<div style="margin: auto">TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
Or with display: flex and align-items: center:
<div style="position:relative;float:left">
<div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;align-items: center">
<div>TEST</div>
</div>
<!-- this is an img in real with unknown size -->
<div style="width:200px;height:200px;background:yellow"></div>
</div>
Related
I am trying to execute some simple container code to center an image, I cannot find it why my Container has a height of 0.
#test {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="container">
<div class="row">
<div class="col">
<div id="test">
</div>
</div>
</div>
</div>
Why does the container have a height of 0, and hence my image not appearing?
By default, block elements get their heights from their content. Content meaning what goes between the opening and closing tag of the element in the HTML. A background image would not be content, but can be thought of more like decoration.
You can set the height manually with css to whatever you like. Keep in mind though that an empty element is unsemantic code.
Adding a height property could fix this as mentioned by you in comments.
Another alternative that would solve the problem with varying image sizes could be to use an img tag inside #test element.
<div id="test" style="background-image: url(/my-image.jpg);">
<img src="/my-image.jpg" style="visibility: hidden;" />
</div>
This way the div takes up the height based on the image size.
<div class="text-center d-flex" style="height: 100vh">
<div class="container m-auto">
<div class="row">
<div class="col-8 mx-auto">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8 mx-auto">
<h1> I should be centered </h1>
</div>
</div>
</div>
</div>
Using margin:auto to vertically-align a div
As the second answer from the linked stackoverflow question over, it was because my parent was not of type flex.
I have a container, with two containers inside of it.
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3...4...">
</div>
</div>
I want the main container to span the entire width of the page. (Width: 100%;)
I want the two child containers to evenly spread and fill the horizontal space on the page.
I want to be able to add say a third or even forth child container and have them all fill from 50% 50% to ~33% ~33% ~33% to 25% 25% 25% 25% and so on...
If there a way to do this easily? Sorry if I didn't explain this well, it is my first time asking a question.
Simply use flex by specifying display:flex on the container and then flex:1 (or flex-grow:1 on the child elements like this :
.container {
display: flex;
}
.container .box {
flex: 1; /*or also `flex-grow:1` */
min-height: 100px;
border: 1px solid red;
}
<!-- container with 2 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 3 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 4 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Refering to the documentation :
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up. The flex grow factor of a flex item is relative
to the size of the other children in the flex-container.
You can read more about flex property and flex-grow property
This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 5 years ago.
The following HTML is simple and does what I want. The green body stretches downward to fill the window.
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
This is the body.
</div>
</div>
</body>
But if I replace that body text with some flex columns, and I give them height:100% because I want them to stretch to the bottom, the newdiv actually gets a height greater than 100% of it's container and causes everything to scroll. Why doesn't 100% mean 100% here?
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
<!-- The new part -->
<div id='newdiv' style="display:flex;flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
The reason you're getting the vertical scrollbar is because you're telling the div parent of col1 and col2 to be height: 100%. This by itself gives it the full height of the viewport.
From your code:
<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
Except this div has a sibling: the header div, which is also taking up space.
So when the browser does it's height calculation, here is the result:
100% + (computed height of header div) > viewport height = vertical scrollbar
Instead of using defined heights, consider letting flexbox do the work. By default, flex items expand the full length of the container along the cross-axis.
So by simply declaring display: flex, child elements will expand to fill all available space (with no vertical scroll). But since a height rule will override this flex setting, we need to remove height: 100% from any flex items.
html, body { height: 100%; }
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
<div id='newdiv' style="display:flex;"><!--adjustment here-->
<div style="background:#ffd0d0; display: flex;"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
There are two adjustments to the original code.
added display: flex
removed height: 100%
Fiddle Demo
I would do it like this. demo
<body>
<header>Header</header>
<div class="body">
<aside>abc</aside>
<div class='inner'>content here</div>
</div>
</body>
In your css
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.body{
flex-grow:1;
display: flex;
align-items: stretch;
}
.inner{
flex-grow: 1;
}
and this gives you a better html structure and maintainability
What about this? - http://codepen.io/arianalynn/pen/WragJP?editors=1010
<style>
body, html {margin:0;height:100%;width:100%;padding:0}
</style>
<body>
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch">
<div style="background:#ffd0d0"> Col 1 </div>
<div style="background:red"> Col 2 </div>
</div>
</div>
</body>
I have updated your code try if this helps you.
set the height to
100vh https://jsfiddle.net/ok20071g/1/
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>