I have a supercontainer (fitting screen width, with margins and padding) , which contains a wider container, which in turn contains (sorry for the redundancy) an undetermined (DB-driven) number of left-floated boxes. It is all part of a Backbone/Underscore template.
I want the boxes to have the same width as the supercontainer, in order to make only one visible at a time (there's a horizontal scroller-function in the Backbone View). I know I could use jQuery to get the supercontainer's width and apply it to boxes upon rendering, but I would definitely prefer a pure-CSS solution to avoid issues with screen resizing.
To make things clear:
HTML:
<div id="supercontainer">
<div id="wide-container">
<div class="fun-box"></div>
<div class="fun-box"></div>
<div class="fun-box"></div>
</div>
</div>
CSS:
#supercontainer {
width:100%;
overflow:hidden;
margin:50px;
}
#wide-container {
display:table;
}
.fun-box {
height:100%;
float:left;
width: ???; /* something that makes it as wide as the supercontainer */
}
How can I do that?
If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes
.fun-box {
height:100%;
float:left;
width: 100vw;
}
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-MDN
You can try making .fun-box a third of #wide-container's width, and #wide-container three times #supercontainer:
#wide-container {
width: 300%;
}
.fun-box {
width: 33.33%;
}
Demo
Related
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
I have a parent which has the CSS property of table-cell, with a child element that need to be 100% the height of the parent. I cannot get this to work in IE Edge - any ideas?
<div class="table">
<div class="table-row">
<div class="table-cell-1">
<a>need 100%!</a>
</div>
<div class="table-cell-2">
some content<br>
that is <br>
quite high
</div>
</div>
</div>
.table {
display:table;
}
.table-row {
display:table-row;
}
.table-cell-1, .table-cell-2 {
display:table-cell;
width:100px;
}
.table-cell-1 {
background-color:red;
}
.table-cell-2 {
background-color:green;
}
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
See JS Fiddle: http://jsfiddle.net/82no4o0x/10/
You have this code:
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
You're asking the a to be height: 100%. But 100% of what? There is no frame of reference. None of the parents have any height specified.
To see what I mean, make this adjustment to the parent:
.table-cell-1 {
background-color:red;
height: 100px; /* new */
}
Now it should work. See demo: http://jsfiddle.net/82no4o0x/23/
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
Read more here: Working with the CSS height property and percentage values
Because you haven't defined the table or the table row with a height, when you give the link a height of 100%, the link doesn't know what you want it to be 100% of. Although it looks pretty straight forward to you and me. So first of, try giving your table a fixed height and then making your cells height 100%... But I'm guessing you don't want to do that because you want it to grow or shrink depending on the content within it. I tried a few techniques using position absolute on the cell and positioning it relative to the row, but that didn't work in IE for some reason. So I came up with a bit of a trick/hack using a large top and bottom padding and a negative top and bottom margin.
.table-cell-1 { overflow:hidden }
.table-cell-1 a {
padding:2000px 0;
margin:-2000px 0;
}
https://jsfiddle.net/82no4o0x/24/embedded/result/
I have a body of text that is currently responsive.
<div class = "col-sm-6 col-xs-6>
<div class = "well">
<p> A lot of text... </p>
</div>
</div>
I want the text to be scrollable (within the well), but I would like the max height of the well to change based on the screen size.
The following makes the well scrollable but I am not sure how
to have the custom heights... one for sm and one for xs.
.scroll_for_sm {
height: 500px !important;
overflow: scroll;
}
.scroll_for_xs {
height: 250px !important;
overflow: scroll;
}
If you want the height of the well to respond according to the screen size (or height in this matter), just specify a height to your body so in your css, add this:
html, body {
height:100%;
min-height: 100% !important;
}
and then, for the well, add this css:
.well{
height:100%;
}
(The percentages can be changed to pixels, em, %, etc and valued accordingly depending on what you want)
I'm trying to create a fixed side bar with a responsive content div which has to be 732px width plus 20px margin left and right. To achieve this i've used position-fixed for both the side bar and nav-top bar. Then applied margin-left so that the content div starts after the side bar.
I'm struggling with the responsive part. I've kept the 248px margin-left in the media query section so that the content div still starts after the side-bar. I'm having difficulty working out px to %. I applied 100% to the content div, that then forces the content to go outside the wrapper by the width of the side-bar (228px + 20px gap). So I took away the width of the side-bar 248px from the 100% which has left me with a large gap of the right. I've added another 20px on the right so that there's an equal 20px left and right of the content div. However the gap still remains.
I'm not sure if its ok to use both % and px together? Where am i going wrong when calculating the space needed? Thanks in advance.
the html:
<body>
<div id="wrapper">
<div id="navbar-top">
</div>
<div id="navbar-side">
<p>side bar (228px width plus 20px gap)</p>
</div>
<div id="page-wrapper">
<p>content div</p>
</div>
</div>
</body>
the css:
#wrapper {
width:100%;
background-color:#099;
}
#navbar-top {
width:100%;
height:50px;
position:fixed;
top:0;
left:0;
background-color:#333;
}
#navbar-side {
width:228px;
min-height:100%;
background-color:#666;
position:fixed;
top:50px; /*pushes content under navbar-top*/
left:0;
}
#page-wrapper {
height:1000px;
width:732px;
background-color:#CCC;
margin-top:50px;
margin-left:248px;
}
/***********************[start of media queries]***********************************************/
#media screen and (min-width:1000px) { /*desktop queries [ >1000px ]*/
#wrapper {
background-color:#C9C;
}
#page-wrapper {
width:73.2%;
}
}
#media screen and (max-width:1000px) { /*mobile queries [ < 1000px ]*/
#page-wrapper {
max-width:732px;
}
}
It is not necessary to give the content element an explicit width.
All you need to do is to give it a top and left margin, to not be covered by your fixed elements. It is the default behaviour of block-level elements to take all horizontal space!
Generally it is a bad idea to work with absolute units like 'px', especially when it comes to responsive layouts. And also setting heights often causes "unwanted results".
But to demonstrate that it is possible, I have set up a DEMO.
width: 100%;
This is not needed for block-level elements like div!
The demo has a real gap of 20px. If you want the elements next to each other (because of the background-color/ -image), then simply set the margin-left of #content to 228px and use padding-left: 20px;.
That's it ...!
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)