Hi I have a banner which contained in a wrapper. The wrapper is not full width but the banner is.
I wanted to prevent horizontal scrolling and achieved this in chrome by setting the body overflow-x:hidden. However when I check in IE11 you can still scroll to the right by clicking on the screen and dragging right.
Does anyone know how to prevent this behaviour in IE?
body {
background: #ccc;
overflow-x:hidden;
-ms-overflow-x:hidden;
}
section {
box-sizing: border-box;
/* or not */
margin: 0 auto;
width: 25rem;
background: white;
padding: 1.5rem;
}
.full-width {
position: relative;
/* child absolute */
margin: 0 -9600rem;
/* add back section padding value */
padding: .25rem 9600rem;
background: red;
color: white;
font-size: 1.125rem;
z-index: 0;
}
.full-width:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
/* subtract h2 padding */
left: 9598.5rem;
right: 9598.5rem;
background: red;
}
<section>
<h2 class="full-width">Full-Width Bar</h2>
<p>Some content.</p>
</section>
Related
HTML
<section fxLayout="column" fxLayoutAlign="center center" class="vwubble-section" fxFlex="auto">
<ng-container *ngIf="(allBubbles$ | async)">
<cdk-virtual-scroll-viewport #scroller itemSize="355" class="scrolling-container scrollbar-hidden" minBufferPx="1200" maxBufferPx="1200">
<vw-vwubbles-item *cdkVirtualFor="let bubble of allBubbles$"
[bubble]="bubble">
</vw-vwubbles-item>
</cdk-virtual-scroll-viewport>
</ng-container>
</section>
CSS
.vwubble-section {
padding: 0px;
margin: 0px;
padding-top: 20px;
min-width: 100%;
/* padding-top: 300px; */
background-color: #000;
/* margin-bottom: 60px; */
/* height: 1400px;
overflow:hidden; */
}
.mat-form-field-appearance-fill .mat-form-field-flex{
background-color: white;
}
::ng-deep .mat-select-value {
color: #673ab7;
}
.scrolling-container{
/* display: flex; */
min-height: 1600px;
/* flex-grow: 1; */
width: 100%;
max-width:800px;
overflow-y: scroll;
padding: 0px;
overflow-x: hidden;
}
.scrolling-container::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
So these vwubble-items are like tweets, and the scroll gets stuck when the user tries to scroll down on mobile, but the weird thing is that I am using this same scrolling method for the replies to these main threads, and these replies never get stuck ever.
Any help would be much appreciated.
I'm trying to get the border of a div to be flush with the browser window edge.
I've loaded up a number of css-resets; cleared everything on the page except a test line [of text] - and the border seems to disappear off the page edge -> almost as if 'box-sizing: border-box' was not working. I've tried everything along the lines of margin: 0 to get this margin to go away.
I've tried position: fixed as well as position: absolute
Master.css is the only stylesheet loaded, no inline overrides.
.. the reset has html etc etc etc
extract from - master.css
html, body, div, span, applet, object, iframe, h1, h2, h3 .......
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#wholePageDiv {
margin: 0px;
padding: 0px;
border: solid 1px blue;
padding: 0;
z-index: 1;
position: fixed;
min-height: 99%;
min-width: 99%;
}
then the html
<div id='wholePageDiv'>
Test text<br>
</div>
The blue border is not flush with the browser window.
In order for the div to be 100% high, the body and html must be set to 100%
It's worth reading what a box model is
*,
:after,
:before {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wholePageDiv {
border: 1px solid blue;
height: 100%;
}
<div id='wholePageDiv'>
Test text<br>
</div>
margin: 0px auto;
padding: 0px;
border: solid 1px blue;
position: fixed;
height: 99.8%;
width: 99.9%;
This works for me on my browser:
#wholePageDiv {
margin: 0px;
padding: 0px;
border: solid 1px blue;
padding: 0;
z-index: 1;
position: fixed;
min-height: calc(100% - 2px);
min-width: calc(100% - 2px);
}
Basically using calc to set the height/width to be 100% minus the width of the border on left/right & top/bottom
Try this code:
* {
margin:0;
padding:0;
box-sizing:border-box;
}
I want to keep my footer at the bottom of the page. I try this
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
but my footer getting messy. My website is made in WordPress. If possible I don't want to use any plugin for this. And I want to use a pure CSS only.
Here the CSS script
footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
.footer-wrap a:hover{
color:#F80000;
}
.footer-logo a {
margin-bottom: 6px;
display: block;
}
.footer-socials {
float: left;
line-height: 0px;
}
.footer-socials a {
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;
}
.footer-socials a.facebook {
background: none repeat scroll 0 0 #1f69b3;
}
.footer-socials a.twitter {
background: none repeat scroll 0 0 #43b3e5;
}
.footer-socials a.gplus {
background: none repeat scroll 0 0 #d84734;
}
.footer-socials a.youtube {
background: none repeat scroll 0 0 #df2126;
}
.ak-contact-address .socials a.pinterest {
background: none repeat scroll 0 0 #ff3635;
}
.footer-socials a.linkedin {
background: none repeat scroll 0 0 #1a7696;
}
.footer-socials .socials a.flickr {
background: none repeat scroll 0 0 #e1e2dd;
}
.footer-socials .socials a.vimeo {
background: none repeat scroll 0 0 #7fdde8;
}
.footer-socials .socials a.instagram {
background: none repeat scroll 0 0 #c8c5b3;
}
.footer-socials .socials a.tumblr {
background: #395976;
}
.footer-socials .socials a.rss {
background: none repeat scroll 0 0 #fbc95d;
}
.footer-socials .socials a.github {
background: none repeat scroll 0 0 #383838;
}
.footer-socials .socials a.stumbleupon {
background: none repeat scroll 0 0 #e94c29;
}
.footer-socials .socials a.skype {
background: none repeat scroll 0 0 #09c6ff;
}
.footer-socials .social-icons span {
cursor: pointer;
display: inline-block;
}
.footer-socials .socials i {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.tagcloud a{
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block;
line-height: 1;
}
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}
Website link
Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
This works perfect. It's the example from W3SCHOOLS
https://www.w3schools.com/howto/howto_css_fixed_footer.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
A couple modern methods using a sprinkle of flex box CSS and the following HTML structure:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Method 1: (fixed height footer) Apply display:flex and flex-direction:column to the body. Apply flex:1 (flex-grow:1) to the main element.
The main element will grow vertically to occupy any empty space, thus making the footer stick to the bottom.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
flex:1;
}
footer {
background-color: #fceec7;
height:50px;
}
<header></header>
<main></main>
<footer></footer>
Method 2: (fixed height footer) Apply display:flex and flex-direction:column to the body. Apply margin-top:auto the footer.
You're done, because auto margins inside flex containers absorb all available free space, making the footer stick to the bottom. Note that this is not dependent on main having any height or content. In this case, we've given main no flex rules at all, and so it gets the default value of flex:initial (flex: 0 1 auto).
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
}
footer {
background-color: #fceec7;
height:50px;
margin-top:auto;
}
<header></header>
<main></main>
<footer></footer>
Method 3: (fluid height footer) This is really the same technique as in #1 but with elements that have no intrinsic height. By virtue of the ratio between the (unitless) flex-grow values given to the competing elements, main will grow at five times the rate as the header and footer.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
flex:1;
}
main {
background-color: #f8e2ff;
flex:5;
}
footer {
background-color: #fceec7;
flex:1
}
<header></header>
<main></main>
<footer></footer>
Bootstrap has a sticky footer you can use.
http://getbootstrap.com/examples/sticky-footer/
Or you can just do it with CSS and jQuery:
https://css-tricks.com/snippets/css/sticky-footer/
Hope that helps.
Working 2019 Solution with CSS Grid
If you're here, then you probably suffered for far too long like I did :)
Here's a solution that will work. It's what I use for my site here:
https://aleksandrhovhannisyan.github.io/
You can verify that it works regardless of how much content is on a page by navigating to a fake URL under my site domain:
I'll keep things very generic and reusable. Below is all the code you need, with a basic DOM consisting of a fixed top navigation/navbar, a main content area, and a sticky footer.
I recommend you run and view it in full-page mode to verify that it works:
body {
display: grid;
/* Replace 80 with your footer height, or with auto for variable-height footers */
grid-template-rows: 1fr 80px;
/* These two are important */
min-height: 100vh;
position: relative;
}
#topnav {
background-color: black;
color: white;
/* Recommended by Google, but adjust as you see fit */
min-height: 64px;
position: fixed;
right: 100%;
top: 0;
width: 100%;
/* This is to ensure that it always appears above everything. */
z-index: 100;
left: 0;
}
#page-content {
grid-row: 1;
/* https://css-tricks.com/preventing-a-grid-blowout/ */
min-width: 0;
/* change as you see fit */
padding-bottom: 64px;
padding-top: 64px;
}
#page-footer {
background: black;
bottom: 0;
color: white;
display: flex;
grid-row: 2;
height: 80px;
position: absolute;
width: 100%;
}
<body>
<header>
<nav id="topnav">topnav stuff goes in here</nav>
</header>
<main id="page-content">
<h1>Page content goes here</h1>
</main>
<footer id="page-footer" class="container">
<div>Made by Name</div>
</footer>
</body>
I found the answer here
Modern Clean CSS “Sticky Footer”
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Brief background: I am using Jquery to build Divs if there is information to be built.
I have read a few threads today on stacking Divs, but everything I try just doesn't seem to work.
Given the following Example fiddle (That is what my current solution looks like)
I would like to stack the BAR 2 onto BAR 1, and then BAR 3 onto BAR 2, creating an end result like this:
BAR 3
BAR 2
BAR 1
I know this questions has been asked a lot before, but none of those threads helped me, so I thought I would show my code.
Thanks!
Remove position:absolute from .bar and add some height to it.
Your fiddle updateded: http://jsfiddle.net/4GjrX/1/
HTML
<div class="bars">
<div class="bar-group">
<div class="bar fig2">BAR3</div>
<div class="bar fig1">BAR2</div>
<div class="bar fig0">BAR1</div>
</div>
</div>
CSS
/* Graph Bars */
.bars {
height: 253px;
width: 100%;
}
.bar-group {
height: 100%;
margin: 0 30px;
width: 200px;
}
.bar {
border-radius: 3px 3px 0 0;
cursor: pointer;
height: 0;
text-align: center;
display:inline-block;
width: 150px;
}
/* Graph Bars */
.bars {
position: relative;
width: 100%;
z-index: 10;
}
.bar-group {
float: left;
height: 100%;
margin: 0 30px;
position: relative;
width: 200px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
}
.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 150px;
}
.bar.fig0 {
left: 0;
}
.bar.fig1 {
left: 52px;
}
.bar.fig2 {
left: 104px;
}
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview