I have several div with unknown width(dynamic width).
How can I auto resize these div to fit browser width?
For example, I have 5 div with difference width. If the browser width only able to fill up 3 div then those 3 div will auto resize to fit the browser width and the rest will display at second row.
How can I make it using html5 and css3. I know that a new feature flexbox in css3 but i am not sure whether I can deal with it.
You can play with the calss - value acording your request.
min/max width/height
see example demo jsFiddle
.grid {
display: box;
display: -webkit-flex;
display: flex;
}
.column {
padding: 20px;
}
.fluid {
box-flex: 1;
background: #ccc;
}
.fixed {
width: 100px;
background: red;
}
Related
Im trying to wrap a div around a image both when the width or height changes.
The issue is that when the width changes the div does not tightly wrap against the child in this case the child is a image:
Wrap div around a image current result
I did determine that setting the flex-direction between row and column solves it when the div gets resized and could use something like a resize observer to toggle the flex direction but hope there is a css solution to this?
Here is a code pen with the issue: https://codepen.io/quinnaz/pen/rNJdjJy
<div class="container direction-row">
<div class="border">
<img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-element" />
</div>
</div>
.container {
resize: both;
overflow: auto;
background-color: beige;
border: solid;
display: flex;
}
.direction-row {
flex-direction: row;
}
.direction-col {
flex-direction: column;
}
.img-element {
max-width: 100%;
max-height: 100%;
display: block;
}
.border {
border-width: 50px;
border-color: blue;
border-style: solid;
}
You need to use the object-fit property and give it the value cover. I would also change max-width and max-height to width and height respectively.
The replaced content (in this case an image) is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
codepen link https://codepen.io/thechewy/pen/ZErxevo
.img-element {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
** EDIT **
If you want it to fully fit the .container div you'll then need to make the .border div fill the parent .container with width: 100%; height: 100%; set on .border, this isn't clear in the question though. If not the above snippet should do the trick.
Personally I would just add the border to the image and remove the extra div and CSS.
I often need that html and body elements have the size of the screen. Typically, in the case when I want to have a svg element fit the whole screen.
To achieve that, I saw that it was possible to use CSS code as follow.
html,body{margin:0;padding:0;height:100%;}
The code that I personnaly use is the following one.
html {
height: 100%;
display: flex;
}
body {
flex-grow: 1;
display: flex;
flex-direction: column;
}
Both seem to work well, but I recently had the following remark.
html { height: 100%; display: flex; } is a useless declaration. html height will always be calculated to fit content. Also 100% means 100% of the parent. html has no parent... also applying flexbox to html is useless as it only has 1 child element that is visible: body.
Actually:
I put 100% of html height in order to have it fit the screen height.
I apply flexbox to html in order to be able to use flex-glow: 1 on its child, and have this child filling its parent.
Is there any better to solution than mine?
I personally use this:
html {
display: grid;
min-height: 100%;
}
This will make your body full height by default and will also respect default margin
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
And you can easily use height:100% on an inner element without issue:
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
.box {
height: 100%;
border: 5px solid green;
box-sizing: border-box;
}
<div class="box"></div>
I find that whenever working with elements that need to be the full height of the screen height: 100vh is usually a good place to start. VH = viewport height. I use it over height: 100% as depending on the layout 100% doesn't always equal the page height, so with VH you know exactly what you are getting!
With VH you can also then use a calc() in your CSS, so if you needed your body to fill the whole height of the page, but subtract the height of a header for example you could do something like this:
<header style="height: 64px">
<section style="height: calc(100vh - 64px)"
I am currently designing a book website and on the right-hand side want to have a "Table of contents" which is in a fixed position and scrollable. I set the header for my website to "display: table-row" and similarly did so with the table of contents and its internal elements. (A header and a the scrollable list of chapters) As I understand it, display: table row should make a div element fill the remaining height and only the remaining height. [1] However, in this case, the content continues offscreen instead of allowing the user to scroll through it. (You can see the problem on this jsfiddle: https://jsfiddle.net/chrmon2/9wzjckvn/6/)
My css:
#container {
height: 300px;
border: 1px solid black;
}
#header {
background: blue;
display: table-row;
}
#toc h1 {
background: red;
display: table-row;
}
#toc #content {
background: yellow;
overflow-y: scroll;
display: table-row;
}
Is this not a capability of display: table-row or am I doing something wrong? Thanks
https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
As I understand it, the effect you want is as follows:
When there is remaining space, stretch the table of contents items;
When the space is too small, begin scrolling.
This is an ideal application of CSS Flexboxes. Flexboxes allow you to define how items stretch (or don't), how they align with each other, how they wrap etc.
In this case, we're going to use flexboxes for all the divs in this example.
.container, .toc, .content {
display: flex; /* begins flexbox layout */
flex-direction: column; /* Flexboxes can be aligned from left-to-right
or from top-to-bottom. In this case, we want
them to be top-to-bottom. */
flex-grow: 1; /* On .container, this does nothing. However, for
children of Flexboxes, this tells them to grow
if any space is still available. */
min-height: 0; /* For a more complicated reason, this is necessary
to make flexboxes scroll correctly. This needs
to be set on all the flexboxes in this example. */
}
.toc .content .item {
flex-grow: 1; /* Make items grow when there is room available */
}
.content {
overflow-y: scroll;
}
You can see the effects of this at this JSFiddle.
Just remove display: table-row from #toc #content and add this :
#content{
max-height:200px;
}
height can be as per your requirement.
I'm creating an internal app so browser compatibility restrictions aren't a massive concern. I am using a div container that is using jquery ui resizable and therefore the size is unknown for any given div. I am also using a chart library (amCharts) which needs the parent div to have a height in order to render the chart.
The issue I'm facing is 100% within a div (with other elements in said div) means whilst the child div accepts 100% as verbatim and makes itself 100% of the parent div this isn't actually the intention - I want it to use the remaining space available in the div, rather than 100%.
I've tried table-row however that doesn't provide a height and therefore amcharts doesn't work well with any resizing (as it has no height/width to base itself on).
So I guess my question is, based on height, what is the best method of making a div use 100% of the remaining space, without JS and without using table/table-cell/table-row styles?
Edit: Here's a JSFiddle of the issue:
https://jsfiddle.net/2c8n1y04/
And the HTML:
<div class="a">
<div class="b"><h3>Header</h3></div>
<div class="c">
<div id="chartdiv"></div>
</div>
</div>
Styles:
html,body,.c,#chartdiv
{
height:100%
}
.a {
height:300px;
background-color: grey;
}
.b {
background-color: yellow;
}
h3 {
margin:0;
}
There is also a chart added in the JSFiddle using the amcharts library, this library is dependent on a height (otherwise it renders to 0 height). Also in the code base i'm using jquery-ui resizable ui (via gridstack) which means I am unable to define a height as the chart height simply has to stretch to the full remaining height within the div.
Any love for Does your engine support flex?
That would in my eyes be the easiest and cleanest solution.
Apply to the parent:
flex-direction: column;
display: flex;
/* or, if a prefixed version is supported, one of: */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
and to the child to be stretched:
flex: 1;
And you should be good to go.
Demo, if your browser supports it (click on "Full page" to see the effect)
html, body {
height: 100%;
margin: 0;
}
div {
border: solid 1px #333;
padding: 5px;
}
#a {
margin: 10px;
height: calc(100% - 40px);
flex-direction: column;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
#b {
height: 100px;
background: #FFE;
}
#c {
flex: 1;
background: #EFE;
}
<div id="a">
<div id="b">Fixed</div>
<div id="c">Flexible</div>
</div>
But may I ask why you want a no-JS solution, since you're already using jQuery?
I want to set the width of the div elements' width accordingly depending on their container width. However, the number will be changed, so the width will need to be adjusted accordingly. Here is a CSSDeck link to explain the situation clearly:
http://cssdeck.com/labs/hvmkapkd
As you can see, both containers are identical (needed), also they have modular content (<div> elements) (which is also needed). Keeping the same structure, is it possible to auto adjust the width of the divs using CSS so that they fill up the whole container?
Then each item in the first container would have 33.333% width, and each item in the second container would have 20% width.
I found the solution right after posting the question.
Setting the .container elements as table and setting the colored content as table-cell made it.
Link is updated above, but here is the link once again anyway:
http://cssdeck.com/labs/hvmkapkd
Give the flex-box concept a chance (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
.container{
height: 100px;
width: 100px;
background-color: lightgray;
margin: 20px;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.container > div {
height: 100%;
/* flexbox setup */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
(http://cssdeck.com/labs/full/hvmkapkd)