I have an outer div with a 75% height. I have an inner scrollable div A and another inner scrollable div B.
div B can be remove dynamically and it has a variable height with max-height.
I want div A to automatically adjust its height based on div B.
#outer {
position: fixed;
bottom: 0;
left: 100px;
height: 500px;
width: 350px;
background-color: gray;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 44px;
background-color: blue;
color: white;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 44px;
background-color: red;
color: white;
}
#content {
position: absolute;
top: 44px;
overflow-y: scroll;
padding: 20px;
height: 200px;
}
#dynamic-content {
max-height: 150px;
overflow-y: scroll;
padding: 10px;
position: absolute;
bottom: 44px;
}
I’m looking for a pure css approach
Here’s a jsFiddle: https://jsfiddle.net/6tr081hb/
I would create a flex container, this way you can have a fixed height for the dynamic-content and an adjustable height for the content by setting the flex property to 1.
Check the jsfiddle.
I also removed absolute positioning for the contents and added a padding to the outer div.
Related
I have div of fixed size height:45px and width:60px and no other css to div. This div used to show the image uploaded by customer. I want to give the dimensions of image so that the uploaded image will be fit in given div perfectly. I need to give the optimized size so that image will look good in div. First logic I tried to give the image with 45 by 60, 90 by 120 like.
What is the correct way to solve this.Please guide.Thanks in advance.
div {
width: 160px;
height: 145px;
overflow: hidden;
border: 1px solid black;
}
div img {
width: 100%;
min-height: 100%;
}
<div>
<img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/>
</div>
Best thing is the following:
#div-to-contain-image img {
display: block;
height: auto;
min-width: 100%;
width: 100%;
}
This will render the image the best as possible. If you need to cover the containing div entirely, you could do the following:
#div-to-contain-image img {
display: block;
height: 100%;
width: 100%;
}
I have multiple solution for you image thumbnail setting. Maybe it will be helpful for you.
Solution #1:
Image vertical and horizontally center inside div
.thumb-container {
position: relative;
width: 60px;
padding-bottom:45px; /* padding is using for the height of image */
margin: 0px;
overflow: hidden;
border: 1px solid black;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
</div>
View on Jsfiddle https://jsfiddle.net/5az8u7bj/
Solution #2: Image vertical and horizontally center width:100% inside div fully cover image box no white space
.thumb-container {
position: relative;
padding-bottom:45px;
margin: 0px;
overflow: hidden;
border: 1px solid black;
width:60px;
}
.thumb-img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}
.thumb-img img {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: -100%;
height:100%;
margin: auto;
width: auto;
}
HTML
<div class="thumb-container">
<div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
</div>
View on JSfiddle https://jsfiddle.net/2d6x3fn6/1/
Maybe these solution will be helpful for you
I have a div header which is fixed to the top of the page with a nested div. The div container has a height of 70px, a fixed height.
I want the nested div to have a height of 100% of the screen, not of the container div.
This is my code:
<div class="header">
<div class="nested">Content</div>
</div>
My css:
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow-x: visible;
overflow-y: auto;
background-color: #ddd;
}
How can I get my nested div to be the height of the screen, not the container?
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: relative;
margin-top: 70px;
height:100vh;
background-color: #ddd;
}
Fiddle:https://jsfiddle.net/ek7zfzua/1/
For making the child div 100% in height, you will have to first let the parent div be 100%.
The child div cannot break open the boundaries of its parent and show up in complete screen unless the parent div boundaries are big enough.
You can use height:100vh instead of percentage: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
So i have .cont that's centered in using position absolute and is height 80% of body.
Inside it there are two divs. One is fixed height. And other one needs to expand to rest of parent, .cont.
So How do i make it expand to parent.
One other requirement is that content in both of these needs to be vertically and horizontally centered.
body
.cont
.top
.fillRest
Here is jsfiddle: http://jsfiddle.net/24jocwu5/
make .fillRest Expand to rest of .cont.
vertically and Horizontally center h1 headings in both divs.
Don't Use calc()
can use display table, flow, position, and other tricks.
Here you go. Absolutely position the white container with a top-padding that equals the height of your fixed-height top div. Then give the top div a z-index so it goes over your white box:
Fiddle - http://jsfiddle.net/24jocwu5/2/
* {margin: 0; padding: 0;}
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
.top {
height: 100px;
background-color: pink;
position: relative;
z-index: 1;
}
.fillRest {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 100px;
height: 100%;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align: center;
width: 200px;
margin: auto;
background-color: #eee;
}
You can use flexbox for this
.cont {
display: flex;
flex-direction: column;
}
.cont > div {
display: flex;
}
.fillRest {
flex: 1;
}
Working Fiddle
This is what you want?
Only position fixed and right and left 0
http://jsfiddle.net/pabliiitoo/24jocwu5/1/
.fillRest {
position: fixed;
left: 0;
right: 0;
background-color: red;
min-height: 80px;
}
In order to expand the .fillRest to the rest of its parent .cont, you need to set it's height to a percentage. I estimate about 20~30% is what you want in order to maintain a similar look to the image you've provided here.
To test it, grab a very large paragraph full of letters and anything you want and put it where the 'Content' text is, that way you will be able to see it expanding in a responsive way. Another suggestion I will give you is to make your width percentages as well, so that they expand according to the width of the screen responsively.
Let me know if this helped you, otherwise I can take another look :)
CSS
.cont {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
Personally, I think the way you're going about this is all wrong. But maybe something like this would work.
http://jsfiddle.net/24jocwu5/5/
CSS selectors I changed:
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: 10% auto;
overflow: hidden;
}
.top {
height: 20%;
background-color: rgba(255,255,255,.8);
}
.fillRest {
background-color: white;
position: relative;
width: 100%;
height: 80%;
}
h1 {
text-align: center;
width: 100%;
margin: auto;
background-color: #eee;
}
This is Summary Of Ways.. First two ways posted here--
FlexBox Method 100% WORKS
Padding Method 80% WORKS. Useful But not exactly.
Css Table Cell and Table Rows 100% WORKS. From Me.
Using Calcs Simplest One. 100% WORKS. From me.
Css Table Cell: http://jsfiddle.net/24jocwu5/7/
.cont is The Table. top & fillRest are table rows, and there is cell which can have vertical align middle.
Calc Method: http://jsfiddle.net/24jocwu5/9/
Works but doesn't scale well if content increases, so need to use another div which can contain the content. Like so http://jsfiddle.net/24jocwu5/10/
Default code:
* {margin: 0; padding: 0; }
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%