I would like to have an ADS fixed on the right side when landscape (25% width) or on the bottom when portrait (25% height).
Landscape is working fine, but on portrait it's not respecting the 25% of the main div.
<div id="container">
<div id="header"></div>
<div id="main" class="ORIENTATION">
<div id="queue"></div> <!-- 75% -->
<div id="ads"></div> <!-- 25% -->
</div>
</div>
Landscape Example:
https://jsfiddle.net/gmrn24yd/9/
Portrait Example:
https://jsfiddle.net/gmrn24yd/8/
The problem was with your header, It was taking 70px and Your #main height is 90%, It can't What if 70px is greater than 10% of the document? It will push other div down and thats why ads portions is getting cutoff. The solution is The height of #main should be based on header aswell. You can use calc function of css to calculate. Do some RnD and check browser compatibility for this. Here is the mdn documentation for calc.
Here is the solution of your problem.
*{
box-sizing:border-box;
}
#container {
width: 100%;
height: 100%;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
display: inline-block;
}
/* HEADER */
#header {
width: 100%;
height: 70px;
position: relative;
background: #ed1c24;
padding: 20px 0;
}
/* MAIN */
#main {
width: 100%;
height: calc(100% - 70px); /*Calculate height based on header*/
position: relative;
text-align: center;
}
/* MAIN LANDSCAPE */
#main.landscape {
display: inline-block;
}
#main.landscape #queue {
width: 75%;
height: 100%;
float: left;
}
/* MAIN PORTRAIT */
#main.portrait {
display: block;
}
#main.portrait #queue {
width: 100%;
height: 75%;
}
/* LANDSCAPE ADS */
#main.landscape #ads {
width: 25%;
height: 100%;
float: right;
background: #000;
}
/* PORTRAIT ADS */
#main.portrait #ads {
width: 100%;
height: 25%;
background: #000;
}
<div id="container">
<div id="header"></div>
<div id="main" class="portrait">
<div id="queue"></div>
<div id="ads"></div>
</div>
</div>
He doe's respect the height, it's just you can't see it because his bottom area is out of the body and his position is fixed. If you use chrome and you know how to see the width and the height of the element you will see it. Look the images:
I could not see any problem while running this code. Only thing since you have given 100% height and width for the container view is cut off. You can verify the code by providing a fixed width and height for the outer container
Related
I want the content inside of my div to scale with the browser vertically to prevent the need for scrolling The images will be different orientations so the width will be different. I know this can be achieved horizontally with width:100%; but max-height:100%; or height:auto; both still extend past the browser window for me and I'm not sure why.
EDIT: Had a lot of additional modal code in here, and simplified it down to the html/css and switched from simple width:100% height: 100% to vh and vw.
Fiddle :https://jsfiddle.net/duckyduck/6soe8zs0/
What's happening:
How I want it to look:
<body>
<style>
.modal {
display: block;
position: fixed;
z-index: 1;
box-sizing:border-box;
left: 0;
top: 0;
height: 100%;
width:100%;
overflow:auto;
background-color:#D81E21;
}
.modal-content {
position: relative;/*modal x button */
width: auto;
height: auto;
background-color: #7E7DE1;
max-height: 50vh;
max-width:70vw;
margin: auto;
}
.mySlides{
max-height:100%;
max-width: 100%;
height:auto;
width:auto;
}
.roll-img {
display:flex;
flex-wrap:wrap;
}
.column {
flex:1;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
</style>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="mySlides">
<img src="images/5_2.jpg">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="roll-img">
<div class="column">
<img class="demo cursor" src="images/5_2.jpg">
</div>
</div> <!--roll-img-->
</div> <!--modal-content-->
</div> <!--myModal-->
</body>
As your .modal-content width is 30%. it might help
.modal-content .mySlides img {
position: relative;
width: 100%;
height: auto;
}
to fit image in 30% width of model content
Try using
min-height: 100vh;
vh refers to the viewport height.
I am able to get the desired result by applying 4 things:
max-width: 90vw; ensures that the object will never exceed 90% of the screen width.
max-height: 90vh; ensures that the object will never exceed 90% of the screen height.
width: auto; adjusts the width to maintain the original aspect ratio
height: auto; adjusts the width to maintain the original aspect ratio
With these four combined, the object will always be fully in view and you will not need to scroll the screen.
Working example:
(open in full screen and resize vertically or horizontally to see the effect)
body {
background: #131418;
margin: auto;
padding: 0;
text-align: center;
}
.adjust {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
margin: 0 auto;
}
<img class="adjust" src="https://unsplash.it/3000/3000">
Lets assume for some reason I can not change the HTML, neither use JavasScript. Lets assume the position of #content_actual depends on the height of #element. #element has a flexible height.
Is there a solution for this problem?
HTML:
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
CSS:
#content {
width:960px;
margin: 0 auto;
}
#element {
// width: 100% of body width
// position: everything but position absolute or fixed
}
Similar to Paulie_D's (apparently we were sharing brainwaves) but this uses percentage to counter the container width. No idea how well supported this would be:
https://jsfiddle.net/7w2cwqfq/4/
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
#content {
width:200px;
margin: 0 auto;
background: yellow;
}
#element {
position: relative;
left: calc(-50vw + 50%);
width: 100vw;
background: red
}
A combination of relative positioning, viewport units and calc.
Codepen Demo
NOTE: this breaks as soon as the viewport is less than the container width. Media queries would be required at that point.
#content {
width: 480px; /* numbers changed for this Snippet */
margin: 0 auto;
background: green;
padding: 50px;
}
#element {
height: 50px;
line-height: 50px;
width: 100vw;
position: relative;
right: calc(50vw - 240px); /* second value 50% of container width */
background: lightblue;
}
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
It should also be noted that the container cannot have overflow:hidden for this technique to work.
I have an HTML page which is divided into 4 sections.
Header
Menu
Content
Footer
I am using 1 div for each section and 1 div which wraps all the 4 divs.
My header's height is 50px, the menu's height is 50px, and the footer's height is 20px.
Then I try setting the menu's height to 100%. Menu div is taking the height of its container which is creating scrollbars in my page.
The CSS is as follows:
html, body {
margin: 0px;
height: 100%;
width: 100%;
min-width: 1024px;
min-height: 500px;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 50px;
}
#menu {
width: 100%;
height: 50px;
}
#content {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 20px;
}
Is it possible with CSS alone or I have to use JavaScript also?
Here is another Pure CSS solution, that works without specifying any height whatsoever.
[this solution deserves its own answer]
Here's a Working Fiddle
Why is it good?
because maybe your header will change one day affecting his height, or your menu will grow, or your footer will need an extra line causing his height to grow..
all of that changes will cause you to re-fix another height for the changing element, and recalculate the right height for the content.
my solution makes it easier, because all the parts are fluid.
let them take the space they need in the page, and the content will always take the remaining height.
Browser support:
Tested On: IE10, Firefox, Chrome, Safari, Opera. (not working on older IE, not tested on other browsers)
any Downsides?
yes. unfortunately, because of the way that this trick works, you will need to change the arrangement of your HTML.
I found a Pure CSS way to create a div container, with two child div's.
the first will take the exact height he needs, and the second will take the remaining of the container height's.
but what if I want the opposite scenario,
What if I want second div to take his exact space and the first div to take the container's remaining height?
I didn't find an easy way to do that with Pure CSS.
thats why, I actually reverse the order of the divs, the first holds the second data, and the second holds the first data, now we let the first div to take his exact height, and the second stretch to the end of the container as we want, and then I rotate their view via CSS to make them appear in order.
For your case it means that you will have to create the HTML in that order.
Header
Menu
Footer
Content
The Solution:
HTML:
<div class="Container">
<div class="Header">I'm in the header</div>
<div class="Menu">I'm in the menu</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">I'm in the footer</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
I'm in the content
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Menu
{
/*for demonstration only*/
background-color: #6ea364;
}
.Content
{
height: 100%;
overflow: auto;
/*for demonstration only*/
background-color: #90adc1;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Here's a thought. May not work for your specific problem, but it does address the issue of mixing pixels and percents. Under the current definition of the problem, you use a fixed height for both the top (header, menu) and bottom (footer). But you want to have the content take up the rest. One solution would be to pad the top and bottom of the container with the same height of the header and menu on top and the same height as the footer on the bottom. The problem then is that you have a 100% height container plus 100px on top and 20px on bottom. But there's a CSS convention for that. It's called box-sizing and is very cross browser compatible (as long as you include -moz). in effect, it calculates 100% height after including the padding. Therefore, 100% height plus all the padding still equals 100% height.
In practice it looks like this
HTML
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS
html, body, .container {
min-height: 100%;
background:#eee;
}
.header {
height: 50px;
position: relative;
z-index: 1;
}
.menu {
height: 50px;
position: relative;
z-index: 1;
}
.footer {
height: 20px;
width: 100%; /* needed because this one is position absolute */
bottom: 0%;
position:absolute;
}
.content {
height: 100%;
width: 100%; /* needed because this one is position absolute */
top: 0%;
left: 0%;
padding-top: 100px;
padding-bottom: 20px;
position:absolute;
box-sizing: border-box; /* here's the kicker */
-moz-box-sizing: border-box;
overflow: auto; /* don't panic. they take the place of normal scroll bars*/
}
Demo
http://jsfiddle.net/WLR5S
Source
http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show (with -moz for firefox)
Pros
Obviously, the point is that you can have 100% height elements with padding to compensate for footer and header
Cons
You have to use position absolute for the content and footer, and you have to apply position relative with z-index to the header area
EDIT
After a little more experimenting, I found that it's probably best to use height instead of min-height and apply overflow:auto or the like. That way the page has appropriate sidebars if the content gets to be too large: http://jsfiddle.net/WLR5S/2/ or http://jsfiddle.net/WLR5S/3/
Pure CSS Solution
using calc() (CSS3)
Working Fiddle
HTML:
<div id="container">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
/*min-width: 1024px;
min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
height: 100%;
}
#header {
height: 50px;
}
#menu {
height: 50px;
}
#content {
height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
overflow: auto;
}
#footer {
height: 20px;
}
notice I removed your width:100% because this is the default behavior of a block element like a div.
This can also be done without stating any height at all, with Pure CSS.
Check my second answer in that page.
I'm using this example fyi: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ (where the left column is a fixed width via px and the right is re-sizable)
I'm trying to make the height of the container 100% of the body height.
e.g. forget the bottom content (the copy code) on that page, just the top layout example, how would I make the height of that (no matter if there's content or not) 100% the body height. With content I'm trying to get it to scroll, without (if any) it needs to be 100% height of the body minimum.
Any suggestions, no luck so far..
My jsfiddle example:
http://jsfiddle.net/GtK98/1/
Have you tried
min-height:100%;
in the css?
this is a layout without a footer, If you want to add a footer comment here and I'll do that to.
Pure CSS, without Fixing the header height, with/without fixing the left side width, cross browser (IE8+)
Take a look at that Working Fiddle
HTML: (very basic)
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Wrapper > div
{
height: 100%;
overflow: auto;
}
.LeftContent
{
float: left;
/*for demonstration only*/
background-color: #90adc1;
}
.RightContent
{
/*for demonstration only*/
background-color: #77578a;
}
Is there an easy way with just css to make a div expand to the full height of the page - 30px. I have a "footer" at the bottom of the page that is 30px tall and set to position: fixed; bottom: 0px; I don't want any of the content from the rest of the page to show behind this footer.
<body>
<div id="wrapper">
<div id="header">Header added just for demonstration purposes</div>
<div id="content">Main content goes here</div>
<div id="footer">And this is my footer</div>
</div>
now style
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* Required to absolutely position the footer */
}
#footer {
height: 50px; /* Define height of the footer */
position: absolute;
bottom: 0; /* Sit it on the bottom */
left: 0;
width: 100%; /* As wide as it's allowed */
}
#content {
padding-bottom: 50px; /* This should match the height of the footer */
}
i would probably place all in a wrapper and set the size to 100%,
But in new css3 you have calc() which does exactly what you need: http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
Please note that not all (even modern) browsers yet have support for calc()