I'm using Bootstrap 3 to create the layout, I'm not sure if that's relevant. The html/body element is set with height: 100%, I even put min-height: 100% on the body, and the body is set to position relative.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
font-size: 16px;
background-color: rgb(232, 232, 232);
font-family: Calibri;
position: relative;
}
Inside the body, on the level under it, is my footer, positioned absolutely with bottom: 0. However, it won't go to the bottom of the page, no matter how bad I want it to.
.footer {
color: white;
background: url(Images/images/footer_bg.gif) repeat-x;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 30%;
}
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
right: 0;
left: 0;
}
The footer is a direct child of the body, that is, it's not hiding inside anything else at all. Here's the markup for the footer:
<div class="container footerContainer">
<div class="row footer">
<div class="col-md-12"><p>Content</p></div>
</div>
As I said previously, this isn't inside any other divs, just the body. What could the problem be here?
There is no bottom:0; in your sample. Which seems to be the issue.
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
border:1px solid;
bottom:0;
}
Here is a Demo with your code: (using bootstrap 3)
http://jsfiddle.net/n6ypb/3/
Related
I have an image that I've put into a div class "outer" that's cropped to a specific size.
I've overlaid text in another div class "mythumbnail" using the styles shown.
I'm stumped as to why I can't get the div "mythumbnail" to sit adjacent to the bottom of the picture in div "outer". I'd be grateful for assistance. Also, I want div "mythumbnail" to expand or contract depending on how much title and text there are regardless of "outer" dimensions, but always collapsing the height of div "mythumbnail" to the bottom of div "outer".
#import url('https://fonts.googleapis.com/css2?family=Changa+One:ital#0;1&family=Open+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap');
h1,h2,h3{
font-family: 'Changa One',Verdana, Geneva, sans-serif;
font-weight: normal;
}
p {
padding: 0;
margin: 0;
}
body {
font-family:'Open Sans',Verdana, Geneva, sans-serif;
font-size: 1rem;
margin: 0;
padding: 1rem;
background-color: #cfbaff;
}
.outer {
height: 250px;
width: 250px;
background-color: #6561B8;
background-size: cover;
position: relative;
text-align: center;
color: white;
padding: 0;
margin: 0;
}
.outer img {
height: 250px;
width: 250px;
object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
padding: 0 .5rem 0;
margin: 0;
}
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0,0,0,0.4);
}
<html>
<body>
<div><h1>Image example</h1></div>
<div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
<div class="mythumbnail">
<h2>Title</h2>
<p>My fairly simple description that takes one or two lines...</p>
</div>
</div>
<div><p>It should look something like this:</p>
<img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
</div>
</body>
Change your thumbnail css to this:
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
bottom: 0;
right:0;
left: 0;
background-color: rgb(0,0,0,0.4);
}
Note that right:0; and left:0; make div behave same like left:0; and width:100%;. It's up to you how you write it.
in situations where the content is small and body height: 100%, the footer is pressed to the bottom of the window, a pop-up absolute very long menu (longer then body height) increases the height of the document, resulting in a lot of free space after the footer. The problem is that the body height is at this point less than the document height.
How, using css, to force the body height to follow the height of the document.
Example on jsfiddle
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height: 100%;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
upd.
is looking for an css solution.
On JS (jQuery), it can be done some like this:
$("body").height($(document).height());
The issue is due to the .ab element having position: absolute;. This causes the element to be taken out of the document flow, resulting in the document height not changing.
Change the .ab to position: relative to fix this, but this might require some other HTML/layout changes.
function addElement() {
document.getElementById("ab").classList.add("show")
}
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
min-height: 100%;
box-sizing: border-box;
}
#ab {
box-sizing: border-box;
width: 90vw;
margin: 30px 5vw;
height: 150vw;
position: relative;
border:1px solid yellow;
display: none;
}
#ab.show {
display: block;
}
<div class="main">
<div id="ab"></div>
<button onclick="addElement()">Add tall element</button>
</div>
<style>
</style>
you can try this this will increase the height of main div and remove scroll or else u can give overflow-y:scroll
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
border: 1px solid red;
height:100%;
overflow-y:scroll;
position:relative;
}
.ab {
left: 2em;
top: 2em;
right: 10em;
height: 150vw;
position: absolute;
border:1px solid yellow;
}
<div class="main">
<div class="ab"></div>
</div>
<style>
</style>
This must be really simple but I'm stuck.
I have a header and below I have a full height/width block that is absolutely positioned. This will be a map but I have just used a coloured block to make it simple.
On top of this background I need the page that is 100% height in the middle. I thought I could use the z-index to show this on top of the absolutely positioned background but the page is always behind the 'bg' div
I know I'm missing something simple
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
z-index has no effect on statically-positioned elements (which is the default). It affects relative, absolute and fixed ("positioned") elements. A common hack would be to add position:relative to your .page.
To force an absolute positioned element for indexing you could use it in negative.
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;