HTML5 body and footer - html

I have a webpage which the main body is about 95% in width, So the problem i have is i want the footer to be 100% even though i am aware that the footer is a child of the main body this making the footer an equal width as the body.
Is there anyway i can override the footer without having to increase the body to 100% width?
I already attempted to set the footer inside a div but i still haven't been able to come up with a solution to my problem

Make a wrapper that is 100% width. Give your content 95% width, give everything else 100%.
<div class="wrapper">
<header>...</header>
<div id="content">...</div>
<footer>...</footer>
</div>

Related

Section not expanding to 100% width

I am working with vue and trying to make my element responsive so starting with Mobile first approach. I am using normalize.css but i don't think it has anything to do with the issue. The div is not 100% width, it cuts half way through. I am using dev tool mobile tool to emulate the screen to view.
I have attached and jsfiddle for the code.
<div>
<header class="container">
<section>
<img src="https://placeimg.com/400/100/arc" alt="logo">
</section>
<section>
Logo text
</section>
<section>
<h3>Call Us</h3>
<div class="contact__info">
<sub>Mon - Fri</sub>
12345
</div>
</section>
</header>
</div>
The fixed width: 1326px; on your header makes that element stretch wider than the viewport (if the latter is smaller than that), so it overflows out of its parent, but does not stretch the parent itself. And because that parent doesn’t stretch, the 100% with of the div inside it are still only 100% of the viewport width.
What is a header with a fixed width of > 1300px doing in this in the first place, if you want to approach this “mobile first” …? Remove it or make it dynamic as well, otherwise this makes little sense as a test case for the rest of what you are doing to begin with.

height 100% overlapping parent

I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.

Split view with one panel scrollable

I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here

2 100% columns + sticky footer

So I'm creating a website, here it is: http://www.testeeee.cixx6.com/
And I can't put the site_contente, and the content and sidebar (this 2 are inside site_contente) 100% height.
Basically I want the content and the sidebar to be 100% no matter what. And when the content on content div is more than 100%, I want it to scroll, I mean, only scroll on content scroll.
Example of what I want:
http://i.stack.imgur.com/i2rid.jpg
Based on what you submitted, you'll need to user an iframe. However, you may be referring to something like this: How might I force a floating DIV to match the height of another floating DIV?
to set scroll in a DIV use the style properties
overflow:scroll|auto
overflow-x: scroll|auto
overflow-y: scroll|auto
for sizeing I think you are answered
Edit ¿have you even tried???:
Copying from the question that was refered in other answer:
<DIV id="site_content" >
<DIV id="content" style="float : left; width :65%; height:auto;background-color:#FDD017;">
</DIV>
<DIV id="side_bar" style="float : left; width :35%;height:auto; background-color:#FDD017;">
</DIV>
</DIV>

Stretchy Footer

how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>