I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo
Related
I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
I have been searching for how to create the aspect ratio of divs using the CSS stylesheet; I could successfully create a demo. The aspect ratio works fine but I can not find a way to set the height of my container if its width and height ratio is bigger (#1 scenario).
I managed to successfully create the #2 scenario. But when I try to create #1 scenario, the container's height expands, here is my code:
HTML, body {
margin:0;
padding:0;
height:100%;
}
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}
#container:hover {
width: 500px; /* Only increasing the width */
height: 300px;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
if you hover over it, only the container's width will be increased, not the height
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
The height of the container should not change, but it is
</body>
</html>
Note: I've only added padding to the divs so it would be easier to visualize where they currently are. Also, ignore my poorly made demo, I am a beginner in HTML and in CSS and I might have missed something very obvious.
Edit: I have made a hover action on css so you can see the aspect ratio working
The problem is with your two inner elements' padding-bottom. Because of the box model, when you apply a percentage-based padding to an element, it calculates based off of the parents (bubbling) width, ignoring the **height.
To resolve this, simply set a fixed padding-bottom:
HTML,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: khaki;
padding: 10px;
width: 350px; /* Increased for demo */
height: 150px; /* To fit within snippet */
display: table;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75px;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75px;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to have the child actually exceed the parent container, then you'll want to use negative margin.
I've three child div and wanted that middle div to ignore width of parent div and take full screen width (yet it needs to maintain its position below first div)
You can define the middle child width a width defined in vw:
.parent {
width: 100px;
height: 40px;
background: blue;
}
.child {
width: 100%;
background: yellow;
}
.overflower {
width: 100vw;
background: red;
}
<div class=parent>
<div class=child>child</div>
<div class=overflower>overflows</div>
<div class=child>child</div>
</div>
Solved this issue by using position: absolute tag. See JSfiddle at: https://jsfiddle.net/sachingpta/3qu3m466/. Sample code
`
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 300px;
height: 100%;
background-color: grey;
margin: 0 auto;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
position: absolute;
left: 0px;
right: 0px;
}
.child3{
background-color: blue;
}
`
This is bugging me for the past hour and can't figure it out. Here's a test case to better understand the scenario http://jsfiddle.net/slash197/RvTe7/1/
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.header {
height: 10%;
background-color: red;
}
.content {
height: 90%
}
#side-bar {
height: 100%;
width: 30%;
float: left;
background-color: blue;
}
#content-zone {
height: 100%;
width: 70%;
float: left;
background-color: yellow;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
HTML
<div class="header">
<h1>test case</h1>
</div>
<div class="content clearfix">
<div id="side-bar">menu</div>
<div id="content-zone">page content <button>add more</button></div>
</div>
I can set the initial height of both my floating elements successfully to be 100%. The problem is new content will be added dynamically and the floated containers do not expand as I would expect.
Any help is appreciated.
If it is enough for you that only the yellow box grows , so you can do it like:
#content-zone {
min-height: 100%;
height: auto;
width: 70%;
float: left;
background-color: yellow;
}
JSFiddle: http://jsfiddle.net/RvTe7/3/
try this
add below class #content-zone{
overflow-y:Scroll;
}
http://jsfiddle.net/RvTe7/2/
You can change height, to min-height
#content-zone {
min-height: 100%;
width: 70%;
float: left;
background-color: yellow;
}
looked for other examples but couldn't find any. my image container uses max-width/max-height so the image scales to the container but I can't seem to get it to auto margin top/bottom or vertical align it to the middle without setting a height.
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
}
#container img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
vertical-align: middle;
}
<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
http://jsfiddle.net/beftR/
I could only get it to work by adding another div named #container2 to your code. I used table/table-cell display type to do it. Here is what I did (jsFiddle here).
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
border: solid 1px #000;
height: 100%;
width: 65%;
position: absolute;
right: 0;
display:table;
}
#container2 {
display:table-cell;
vertical-align:middle;
}
#container img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="container2">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" />
</div>
</div>