I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.
This is my code for the sticky footer
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
}
#footer, .push
{
height: 60px;
}
Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.
Change your CSS to the following should fix the problem:
html, body, form
{
height: 100%;
}
EDIT
In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I'm using laravel 5.5 and need a footer to be at the bottom of every page.
Currently I have the footer in app.blade.php along with a nav bar and the content coming from other .blade files using yields #yield('content')
the app.blade file has
html, body {
height: 100%;
}
and the footer is
footer {
position: static;
bottom: 0px;
}
When inspecting the page the html and body are 100% height but the footer is just hanging out with the content and not shifting to the bottom of the page.
Are there any larvel related styles that could be interfering with the positioning?
I don't think laravel styling has anything to do with the problem. Setting the positionproperty to static isn't going to give you the results you're looking for, as static is the default position value for almost every html element. You could set it to absolute, fixed or sticky and depending on your choice you might need to set the bottom property on your footer to 0px.
This CSS-Tricks article should give you a better idea of how you want to implement the position and bottom properties on your footer.
Here's an implementation using the fixed value on the footer and a relative value on the body element.
You can also view this codeply project and experiment with changing the footer's position value.
html, body {
height: 100%;
background-color: red;
position: relative;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: green;
}
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
is there a way to style a footer, so when there is a content (more than the height of the browser) it will be at bottom of the page(hidden), but if there is not enough content it will stick at bottom edge of the browser?
One solution I use requires a known height of your footer.
Fiddles:
A lot of content
A little content
Here's the HTML:
<main>
hello
</main>
<footer>
i am the footer
</footer>
And here's the CSS:
html, body {
height: 100%;
}
main {
min-height: 100%;
margin-bottom: -100px;
background: #ddd;
}
main:after {
content: "";
display: block;
height: 100px;
}
footer {
height: 100px;
background: #eee;
}
The trick is to set the main part of your document to have a min-height of 100%. This element must contain everything else on your page. In my example, I used the main element for this.
Next, give this element a negative margin equal to the height of the footer. This moves it up just enough to leave room for the footer there at the bottom.
The last piece of the puzzle is the after element. This is required to fill the space of that negative margin. Otherwise, the content of the main will overflow into the footer.
I can only recommend to read this.
Show footer if at bottom of page or page is short else hide
or this
http://css-tricks.com/snippets/css/fixed-footer/
You can always use the calc function in CSS to make out the difference in between the footer and the body height.
footer {
height: calc(100vh - 100px);
}
for example...
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).