I have been building a website and mainly testing it in Chrome.
Recently I realised some of the CSS does not apply in Firefox.
I guess it's probably : main { min-height }
This jFiddle reproduces this error, where the main div doesn't have the height it's supposed to. http://jsfiddle.net/msW9m/
HTML :
<div id='main'></div>
<div id="container"></div>
<div id='footer'>
<div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div>
</div>
CSS :
#main {
min-height: 80%;
height: auto;
border: 1px solid #bbbbbb;
margin: 3% 5% 1%;
padding: 10px 10px;
}
#footer {
position: absolute;
left: 50%;
}
#footerRelative {
position: relative;
left: -50%;
font-size: 80%;
}
/*Probably Irrelevant*/
#container {
margin: 0 auto;
margin-top: -300px;
margin-left: -261px;
position: absolute;
top: 50%;
left: 50%;
width: 523px;
height: 600px;
background-image: url('../images/doctorSymbol.jpg');
background-repeat:no-repeat;
background-position:center;
opacity: 0.125;
overflow: hidden;
z-index: -1;
}
However, in Chrome everything works perfectly and the main div has a min-height of 80% . I was wondering if there is a workaround to this or If I am doing something wrong.
Thank you.
Have you tried making body and html 100%?
In some browsers, the body element doesn't keep 100% height until its content is full.
http://jsfiddle.net/HRKRN/
html, body {
height: 100%;
}
Also a possible solution that worked for me: set the div's display to table-cell.
use CSS3 to solve this issue
http://pastebin.com/Q8727Kvt
Align vertically using CSS 3
Related
I have looked at the already asked questions and tried multiple solutions but nothing seems to be working for me. I have a div, with multiple div's inside of it, and I cannot get it to center in the middle of the page on resize
This is the parent div which contains multiple others
<div id="showme" class="newmodal" style="position: absolute; z-index: 1000;
max-width: 561px; left: 700px; top: 263px; display: none;">
This is the css for the div
.newmodal {
position: fixed;
margin: 0 auto;
max-width: 900px; /* our page width */
min-width: 500px;
width: 50%;
}
Sorry if I am being really stupid, very new to this. I have tried removing the left and top inline styles but nothing is working.
EDIT
I forgot to mention that this div is being hidden and unhidden using a button so I am not sure if that changes any of the current answers.
.newmodal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
max-width: 900px;
/* our page width */
min-width: 500px;
background: #222;
}
<div id="showme" class="newmodal">Some content</div>
It will center div vertically and horizontally.
You need to close your div tag. Why use width,max-width,min-width? Try the following code:
.newmodal {
background: red;
max-width: 200px;
margin: 0 auto;
height: 50px;
}
<div id="showme" class="newmodal"></div>
Try this:
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.newmodal {
border: 1px solid black;
display: block;
margin: 1.5em auto;
text-align:center;
padding:7px;
width: 50%;
background:#222;
color:#fff;
}
<div id="container">
<div class="newmodal">Some content here</div>
</div>
I created this CodePen that you can use to look at. Try using something like this:
.newmodal {
position: relative;
margin: 0 auto;
max-width: 900px;
min-width: 500px;
background-color: red;
}
Remove all of your styling from your HTML because you had some contradicting styles going on between the CSS and HTML you provided.
<div id="showme" class="newmodal">
<!--Some added data-->
</div>
Remember also that in order for margin: 0 auto; to work, the element must be block style, it can't float, it can't be fixed or absolute, and a width that is not auto. Found this information from this post: What, exactly, is needed for "margin: 0 auto;" to work?
Edit:
So if you are using jQuery and you want to make it appear and disappear, you can do something like this:
$(".newmodal div").on("click", function() {
if ($(this).css('display') == 'block') {
$(this).hide();
}
else {
$(this).show();
}
});
The only problem with this is making the element reappear. But I'm not sure what your entire project looks like but I hope this points you in the right direction.
1st the css part of "margin: 0 auto" and "width 50%" should be for the child div and not the parent.
2nd you can make your life much easier my moving to flexbox which does all that automatically.
See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I'm building an web app which has a 100% height/width/fullscreen layout. I am looking for a CSS-trick to proportionally resize an elements dimensions according to its height.
Right now I am looking for an equivalent of what this trick does to the x-axis:
html, body{
height:100%;
margin:0;
}
#view {
min-height: 100%;
position: relative;
width: 100%;
background-color: #333333;
}
#test-hld {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: tomato;
width: 100%;
height: 75%;
}
.test{
position: relative;
width: 30%;
}
.test:before{
content: "";
display: block;
padding-top: 75%;
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: black;
}
<div id="view">
<div id="test-hld">
<div class="test">
<div class="content"></div>
</div>
</div>
</div>
But changing (for example) .test{height: 80%} and .test:before{padding-left: 75%} makes the browser render no dimensions of the box at all.
My question(s) is
Why is the opposite not working?
Has it something fundamental to do with setting heights of elements with CSS?
Can flex/flexbox solve this?
I know it's possible to fix this with some lines of JS but I just can't believe it's not doable with CSS until someone slaps my face telling me to get real.
First of all, just to know why the padding trick works.
Padding-top and padding-bottom are vertical dimensions that are related to the width (so, an horizontal dimension) of the container.
That allows the ratio of an element to be fixed, and related to the width of the container. But there isn't any horizontal dimension that is related to some vertical of the container, so the equivalent trick over the height is not posible right now.
I have tried to get this same result using another technique, but I have had a very partial success.
My failed attempt is try to use an image to set the ratio
body, html {
height: 99%;
}
.base {
height: 40%;
border: solid 1px green;
display: inline-block;
position: relative;
}
.ratio {
content: url("http://placehold.it/400x200");
opacity: 0.05;
height: 100%;
width: auto;
position: relative;
}
<div class="base">
<img class="ratio" />
</div>
This is working in IE and Chrome, and failing in FF. But just on initial loading.
Changing the browser size won't work until the page is reloaded. I just can't figure out why, or how to solve it
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
This is perhaps a common question, but all the answers I have found around the web, didn't work properly.
I want to create a sidebar for my webpage, which fills the entire height of the webpage.
Then when you scroll the sidebars content should move along the rest of the sites content.
I tried this methods:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
margin: 0;
}
#wrapper {
width: 100%;
}
#sidebar {
width: 280px;
position: absolute;
top: 0;
bottom: 0;
}
#content-area {
width: 900px;
margin-left: 280px;
}
..and:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
height: auto;
min-height: 100%;
margin: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar {
width: 280px;
height: 100%;
float: left;
}
#content-area {
width: 900px;
height: 100%;
float: left;
}
The first one works fine, until the content is extended: http://jsfiddle.net/B3bCb/1/
If that happens then the sidebar stops according to the browser-window height.
The second one didn't worked at all: http://jsfiddle.net/B3bCb/2/
I have also tried the faux column method, but I need to have an CSS-shadow (which blur, spread and color, can be changed dynamically on the site) on my sidebar, which I cannot do properly in the faux column method (Faux column is just an image).
So how do I make my sidebar 100% in height, no matter how much content I have?
Making the sidebar position as "fixed" it stays, doesn't matter how much content you have. I don't know if I solve your problem but hope it helps ;)
Here's the code:
#sidebar {
width: 280px;
position: fixed;
top: 0;
bottom: 0;
background: blue; }
Here's the fiddle
The following css can be another alternative for this
#sidebar {
width: 280px;
position: fixed;
top: 0;
height:100%;
background: blue;
}
#content-area {
position:relative;
left: 280px; // width of your side box.
}
You have a couple of choices, but the gist is to do with CSS position.
The reason position: absolute; does not work is because it needs some tweaking for that to work. You need to disable scrolling on the html, body, and wrapper classes, and enable scrolling on the content-area.
html, body, wrapper {
overflow: hidden;
}
.content-area {
overflow: auto;
}
You can see an example of this here. It's a responsive sidebar layout I made.
The other option is to use a position: fixed; on the sidebar, as others have noted.
Check this fiddle http://jsfiddle.net/dJ654/2/
I have changed some styles
#sidebar {
width: 10%;
height: 100%;
position:fixed;
right:0px;
top:0px;
background-color:gray;
}
#content-area {
width: 90%;
height: 100%;
float: left;
background-color:green;
}