The structure of my html is
<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>
What I want to do is give a fixed height to the divHeader, let's say 100px, and let the divBody expand to the end of the page exactly, without scroll bars for the browser.
So, if the user's window is 1000px, the body will be 900px and etc...
If i set the divBody height to 100%, it will take the 100% of the body, which means will create a scroll bar in the page.
Thanks in advance,
You could use absolute positioning: FIDDLE: http://jsfiddle.net/Z4vNN/2/
.divHead {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: red;
}
.divBody {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background-color: green;
overflow: auto;
}
.divBody {
height: calc(100% - 100px);
}
#crush is certainly right, but if absolute positioning messes up other page elements you can avoid it by just having the elements displayed as blocks : http://jsfiddle.net/kF5wQ/
#header {
height:100px;
width:100%;
background:red;
display:block;
}
#container {
height:100%;
width:100%;
background:blue;
display:block;
overflow:visible;
}
Related
This pen probably explains my problem best:
http://codepen.io/anon/pen/xwQpLy?editors=110
I'm using the following trick to keep the box constrained to a 1:1 ratio:
.squarebox {
position: relative;
width: 100%;
}
.squarebox::before {
padding-bottom: 100%;
content: "";
display: block;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
But, I'd like the box to always fill the parent's width or height, whichever is smaller. In the above example, the box only ever fills the parent's width.
Do you mean like this?:
http://codepen.io/anon/pen/yYQpqp?editors=110
The parent needs to be position:relative, the .content div needs to be width:100%; height:100%; as well as position:relative with top, right, bottom and left set to 0.
I stripped out the squarebox div.
.squarebox {
position: relative;
width: 100%;
}
.content {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:orange;
}
My first slide on this page, Promotion slide wasn't responsive...I added
max-width: 100%; height: auto
to the css. It works But now it adds too much space below the image when viewing on mobile device. It also makes the title disappear. How do I make this image responsive, but get rid of the space below?
http://new.921thefrog.com/index.php/test-promo-slider/
Here is the rest of the code
.promo_slider_wrapper { margin:10px 0; position:relative; }
.promo_slider { height:235px; overflow:hidden; position:relative; }
.promo_slider img {margin:0; padding:0; max-width: 100%; height: auto }
promo_slider .panel {
overflow:hidden;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
In order to center the image you can apply this on the img elements:
img {
position:absolute;
width: 100%;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But still you will need some js if H > W because in that case the height should be 100% and the width auto
// EDIT
I just took a look at the page source code
<div class="promo_slider auto_advance" style=" height:418px;">
the height should be set to auto, not 418px
I wish to achieve the following effect, regardless browser (re)size:
The images are set to be flexible, so, each of them as a max-width declared as:
100%.
http://jsfiddle.net/rgdrqbg4/
The css:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?
A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.
Try this:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/
UPDATE
You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/
This will only work if the image inside is smaller than the image that is wrapping it.
UPDATE
You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:
I added a width of 30% to the black box so it can shrink with the larger image too.
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
And remove the width you set before.
Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 25.508038585209%;
width: 34%;
height: 40%;
}
<div class="home-video">
<img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
<img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>
Do you mean like this? You were on the right track.
.play-video {
position: absolute;
top:20%;
height:inherit;
left:28%;
width:40%;
margin:0 auto;
}
http://jsfiddle.net/rgdrqbg4/7/
I'd live to position two divs in a container right next to each other which occupy 100% of the container together with a fixed amount of padding between the two. Is it possible to do so without knowing the width of either divs or using percentages. Hopefully this sample code will give some idea on what I'm trying to achieve.
http://jsfiddle.net/C2uTA/
.orange {
position:absolute;
top:0;
width:45%;
background-color:orange;
}
.yellow {
width:auto;
background-color:yellow;
}
<!--sample html-->
<div style="position:relative;width:100%">
<div class="orange">Orange Div</div>
<div class="yellow">I want this div to start 10px to the right of the orange div</div>
</div>
Try adding this to .yellow:
.yellow {
position: absolute;
right: 0;
top: 0;
width: 45%
You can simply play with percentages until you're satisfied with the space between the two.
Try using float:left; margin-right:(according to your convenience in your page) in the class for yellow to place the orange and yellow next to each other in the container.
And as Davion said, you play with percentages and then you will get your spaces perfectly.
Try using following css code:
.orange {
background-color:orange;
position: absolute;
top: 0;
left: 0;
right: 50%;
}
.yellow {
position: relative;
left: 50%;
top: 0;
background-color:yellow;
width: 48%;
margin-left: 2%;
}
Hope it should help you in achieving your purpose.
I finally got the problem where my search-fu is not enough. I made some gallery carousel with fixed height and width with image list inside (displaying one li at time). Images are positioned absolute (with margin:auto etc) inside relative li element.
Images often are larger than its container which has overflow:hidden. Images have max-width:100% It creates a desired effect that smaller images are centered within container and larger (higher) are cropped which can be opened for full version.
.gallery-items>li {
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
.gallery-items>li img {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:100%;
max-height:none;
height:auto;
width:auto;
position:absolute;
}
fiddle here http://jsfiddle.net/fW63c/1/
It works great (center of the image is in the center of container) in IE8, IE9, Opera 12/15, Chrome but in Firefox the larger images start with the beginning of the container (like it would have top:0. Does anyone have any idea how to make it work in FF (preferably just using css) . Thanks in advance for any solution, Fafel
Best way to do it if you don't have to support IE8 or older is to translate the image vertically. This method works in all major browsers, including IE9+:
img {
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/6n2vu7zd/1/
This one has been troubling me quite a bit, but eventually I found that setting top: -100%; and bottom: -100%; will have the desired effect.
Normally the following will work just fine:
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But in Firefox, if the parent is not as tall as the child it will simply decide to align them at the top. But this will work:
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
I created a demo to demonstrate:
There are two examples, the first will be wrong in Firefox but both will look fine in Chrome, Edge, and IE.
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
.parent {
margin: 30px;
position: relative;
display: inline-block;
width: 100px;
height: 25px;
background-color: yellow;
}
<div class="parent">
<img width="75" heigh="75" class="child" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="parent">
<img width="75" heigh="75" class="child2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>