I've a page like this:
<html>
<head>
<style type="text/css">
#mainDiv{
height: 100%;
}
#myDiv{
overflow: auto;
width: 400px;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="myDiv">content</div>
</div>
</body>
</html>
I wish mainDiv was entirely contained in the screen (without scrollbars). This div contains myDiv and myDiv height depends on the screen height in such a way that its bottom border has a 30px margin from the screen bottom (or mainDiv bottom).
What can I do?
Like #Johno suggested the solution should be
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
but when you try this solution you get a scrollbar because the content height is bigger than that of the window.
You get this because I think that the margin is added to the height of the content (that is 100%). So the order of the rules evaluation is:
Set the content height to 100%
Add a border of 30 px to the current height.
I tried to set a fixed height to the content, that is the window height minus 30 px, and I got the correct result.
#mainDiv {
width: 100%;
height: 100%;
}
#mydiv {
width: 100%;
height: 100%;
margin-bottom: 30px;
}
HTML
<div id="mainDiv">
<div id="mydiv">content</div>
</div>
You could try:
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }
The padding of #mainDiv should give the effective margin that you're hoping for on #mydiv.
To make sure there are no scroll bars, you may need to remove padding etc from the body too.
Related
In this picture, I have a HTML content "div#container". It may contain a lot of things like images, forms and other HTML tags.
I want to resize this div and put it inside other container(s). The new containers may have different widht/height so I have to resize the div#container. It's a bit like to resize an image - I need to keep the width/height ratio. And I need to place the div#container in the center of the new container.
Is it to do so with pure CSS?
Thanks
Here's how you can do it using height: 100% and width: 100% on div#container and padding on div#dash-container:
.container {
background: lightgray;
position: relative;
height: 100%;
width: 100%;
}
.dash-container-1,
.dash-container-2 {
box-sizing: border-box;
border: dashed 2px;
}
.dash-container-1 {
height: 500px; /*whatever sizes you want*/
width: 300px;
padding: 100px 0;
}
.dash-container-2 {
height: 300px;
width: 500px;
padding: 0 5%; //you can use px, %, em, ...
}
<div class="dash-container-1">
<div class="container"></div>
</div>
<div class="dash-container-2">
<div class="container"></div>
</div>
I have a set of absolutely positioned fluid divs within a container and want to display an image within each div that is vertically and horizontally centred within the container and fills up as much of the available space as possible. Due to using these images for other purposes they have to be img tags and not background images (otherwise with CSS3 this would be easy!)
I would have thought the following code should do just this but for some reason on Firefox the image displays in it's original dimensions and is not constrained by the parent dimensions. In Chrome the width seems to be correctly linked to the container however the img height is not constrained by the container height.
I could understand it if there was no width/height set on the parent but every element in this example has a percentage width/height set so i don't think this is the problem. FYI if you set a specific width:100% on the img then this constrains the width correctly (but can't be done as it means it's loses the correct aspect) however it still doesn't work for height even if you set the height to 100%,
You can see a jsfiddle at http://jsfiddle.net/deshg/xrzk084d/ and the code is below.
If anyone could point me in the right direction as to what i'm doing wrong that would be greatly appreciated!
body, html, #outer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
background-color: #ffcc00;
display: table;
position: absolute;
left: 20%;
top: 30%;
width: 60%;
height: 40%;
}
#containerinner {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
#containerinner img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
<div id="outer">
<div id="container">
<div id="containerinner">
<img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="">
</div>
</div>
</div>
Cheers,
Dave
The issue here is that set a vertical alignment of middle is impossible without specifying the height of the containing element. In your situation, you want the height to be relative to the viewport which creates additional difficulty.
However, if we use both the vh (viewport height) and vw (viewport width) units defined in CSS3 we can achieve what you're after. I have then assumed that you want your image to be center aligned and with a max width and height of 60% and 40% of the viewport respective. I have reduced the markup to the following (See JSFiddle):
#container {
position: fixed;
top: 30vh;
left: 20vw;
background-color: #ffcc00;
}
#inner {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40vh;
width: 60vw;
}
img {
display: block;
max-width: 60vw;
max-height: 40vh;
margin: 0 auto;
}
<div id="container">
<div id="inner">
<img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0">
</div>
</div>
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle
I am trying to make a sticky footer, and my page's html structure is like this: (vastly simplified)
<head>...</head>
<body>
<div class="centerPane">
<div class="userCenter">..</div>
<div class="bottom>...</div>
</div>
</body>
css:
head
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.userCenter
{
position:relative;
height: 100%;
}
.bottom
{
position: absolute;
bottom: 20px;
height: 30px;
}
For some reason, this is pushing the bottom OFF BEYOND the bottom of the page regardless of the browser window size on firefox 10.0.1.
Here is a demo: 173.228.119.111:3000/users/sign_in
not quite sure what the problem is, but I would take a look at this http://www.cssstickyfooter.com/using-sticky-footer-code.html you seem to be missing some css...
You could try setting the margin on the footer to a negative value i.e.:
margin: -4em;
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>