When the text is added on top,the div moves down and the text on bottom is not visible. I want the divs to resize so that everything fits into container keeping the width and height to 100%.
Is there are any way to do this with CSS or do I need JavaScript?
body,html {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
}
.img {
background: blue;
width: 100%;
height: 50%;
display: inline-block;
vertical-align: top;
}
<div id="container">
<p>Text 1</p>
<div class="img"></div>
<div class="img"></div>
<p>Text 2</p>
</div>
You could use CSS flex for this.
It could look something like this:
body,html{
margin: 0;
padding: 0;
}
#container{
position: absolute;
width:100%;
height: 100%;
display:flex;
flex-direction: column;
}
.img{
background: blue;
width: 100%;
height: 50%;
vertical-align: top;
}
<div id = 'container'>
<p>Text 1</p>
<div class="img"></div>
<div class="img"></div>
<p>Text 2</p>
</div>
Fiddle
Using jquery you can achieve like below. Count total number of tags in container div and divide the 100% height among those element. SO all the items will be visible with overflow:hidden
Please check below snippet.
var itemLength = $('#container *').length;
$('#container *').css("height",(100/itemLength)+"%");
body,html{
margin: 0;
padding: 0;
}
#container{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
}
.img{
background: blue;
width: 100%;
//height: 50%;
display: inline-block;
vertical-align: top;
}
p,img,div{
padding:0;
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = 'container'>
<p>Text 1</p>
<div class="img"></div>
<div class="img"></div>
<p>Text 2</p>
</div>
Change the height of .img to 40%. Because taking 50% height is making it consume the entire height.
body,html{
margin: 0;
padding: 0;
}
#container{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
background: #ccc;
}
.img{
background: blue;
width: 100%;
height: 40%;
display: inline-block;
vertical-align: top;
}
<div id = 'container'>
<p class="text1">Text 1</p>
<div class="img"></div>
<div class="img"></div>
<p class="text2">Text 2</p>
</div>
Css Code
body,html,p {
margin: 0;
padding: 0;
}
Script
$(function(){
var containerHeight= $('#container').height();
var pfirstHeight=$('#container p').eq(0).height();
var pbottomHeight=$('#container p').eq(1).height();
var imgHeight=(containerHeight-pfirstHeight-pbottomHeight)/2;
$('.img').height(imgHeight);
});
Related
There is an iframe that needs to rendered 100% for both width and height. Using the approach shared in https://stackoverflow.com/a/325334/858820 sort of helps to solve the problem.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
The iframe is rendered 100% but it requires the user to scroll down since the website has a header. I'd expect that the iframe is be rendered 100% but considering the remaining space available (taking into account the header space). This is a sample showcasing the problem:
body, html, main {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<header>
<h1>My header</h1>
</header>
<main>
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
</main>
How to render the iframe 100% without forcing the user to scroll down?
Try this its work fine
body, html { margin: 0; padding: 0;display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<html>
<body>
<header>
<h1>Tests</h1>
</header>
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://example.com" class="second-row"></iframe>
</div>
</body>
</html>
I have 2 div both are 50% width and float left what I want if the right div doesn't have content then left div width should be 100%.
if ($('.wrap .box2').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1>Hello 2</h1>
</div>
</div>
So what I want if .box2 dont have text inside h1 then left div width should be 100%
if ($('.wrap .box2 h1').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1></h1>
</div>
</div>
I just ran this code and the left div took the whole space
Try this:
.wrap {
width: 100%;
display: flex;
}
.wrap .box1 {
width: 50%;
background: red;
flex-grow:1;
}
.wrap .box2 {
width: 50%;
background: green;
}
.wrap .box2:empty {
width: 0;
}
it works without using javascript/jquery and uses flex-boxes and the :empty selector.
for some reason my child elements don't stretch to the main section which has a fixed height of 1000px.
I need to be able to have a fixed height off 1000px and max-width of 1000px. There's also a space between two divs. I need it to be more fluid and stretchy. Could anyone explain what is happening please? Thanks
body {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.container {
min-height: 100%;
text-align: center;
background: green;
}
.main {
height: 1000px;
position: relative;
display: block;
}
.contain {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.top, .bottom {
z-index: 1;
top: 0;
bottom: 0;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.top img {
background-color: red;
height: 379px;
width: 100%
}
.bottom {
background-color: yellow;
height: 379px;
width: 100%;
}
<div class="container">
<section class="main">
<div class="contain">
<div class="top">
<img class="img">
</div>
<div class="bottom">
<div class="content">
<h1>
eoufiwueg
</h1>
<p>
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
</p>
</div>
</div>
</div>
</section>
</div>
add this css
.container {
min-height: 100%;
text-align: center;
word-wrap: break-word;/*add this property*/
background: green;
}
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>
I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.