I'm working on designing a full-page site, which will be powered mostly with javascript (ajax in particular). Right now, I'm working on the basic structure and such.
I've seen several questions with similar goals, but none of them really helped. Maybe I'm misinterpreting, or something. I dunno. Anyway, my goal is to create a page that takes up exactly the amount of space a user's browser provides, without empty space on the sides or top. This means I have to rely upon percent-based measurements for my structure.
Problem is, one of the two key elements is to be a specific size, in pixels. Any bigger, and there will be space left empty and put to waste. Any smaller, and my site's logo won't fit. Take a look at my code:
HTML
[nav]The Beef[/nav]
[footer]The Cream Filling[/footer]
CSS
html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}
nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}
footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}
The problem is, now the full-page navigation (as I mentioned, javascript-powered site) continues on "under" the footer. What I want it to do, is take up all of the space the footer isn't using, without extending the page beyond the capacity of the user's screen (IE, no scroll bars).
I'd rather not use javascript for this, but I'm willing to do so if there are absolutely no other options.
Why not specify the bottom position of the content block:
bottom: 170px;
Related
I was wondering is there a way to stretch only the footer in blogger simple template to full width, without affecting other blog elements? I read the similar topics, but they were about wordpress or changing the other elements, too, and mine is blogger platform. I tried with changing this code:
.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: auto; max-width: auto; _width: $(content.width);}
and I did stretched the footer, but also the other blog elements. So, is there a way to leave other elements unaffected and manipulate only with footer element?
My blog's URL is: http://fashionsanja.blogspot.rs
Another possible solution is to use position:fixed. It absolutely positions elements in the browser window. Additionally, by setting left and right it will span the entire width of the browser window. Based on your site, the following worked in dev tools:
#KBD {
background-color: #000;
color: #fff;
font-size: 11px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Apologies if this has been asked before, but I've been checking quite a few other related threads and they've not been exactly what I'm looking for.
So I have a 1280x720 video that I was hoping to make my page's video background. I want it to scale to fit viewport height at all times, but NOT change aspect-ratio.
So this means that if the viewport ends up wider than 16:9, then I can have black-bars/letterboxing on the sides.
But if the viewport is narrower than 16:9, the sides of the video are cropped (I'm fine with this, as all important parts of the vid are in the center).
How would you suggest I do it? It's been driving me crazy.
I had the same issue earlier. This is how I resolved it.
.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}
The code is straight forward.
Well, without a working example it is hard to give a suggestion that will definitely work but here may be something that will send you in the right direction.
Create a wrapper around the video that has an absolute position and use flexbox to center the contents (the video) in the center of the page, then give it a black background. You can do that with something like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}
You may need to play around with the CSS for the video perhaps like this:
video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}
Something like that should give you the results you are looking for, or at least close to them. (I did not test this though)
Hope this at least gives you some ideas if it does not work. In the future, it is best to add your current code to make it easier for us to see what you have actually tried.
I have a weird problem. I set my top menu to width: 100%, but while loading, it goes out of screen (to always 522px).
Debug
I stopped page load with debugger; in console. Element's computed width is 522px. Clicking on that brings me to css width: 100%. Everything in the page stays within page width except the menu.
CSS
#mobile_header {
vertical-align: middle;
position: fixed;
background-color: #5d3026;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
z-index: 99998;
box-sizing: content-box;
}
Weird part
It goes out of bounds only while loading. Whenever page finishes loading, it goes to normal 100% of full screen size. No additional JS affect this. No CSS is loaded (after the page load pause). I've also deleted all the contents from within, changed ID in html and css (so really no scripts would affect it), cleared cache. Still goes to weird 522px (that is translated from 100%).
I know it's a wild shot, but does anyone has any guess of what could cause such a situation (on all browsers)?
For fixed elements you can use left: 0 and right: 0 for 100% width
#mobile_header {
vertical-align: middle;
position: fixed;
background-color: #5d3026;
top: 0;
left: 0;
right: 0; /* <= */
height: 50px;
z-index: 99998;
box-sizing: content-box;
}
At the end it turned out that my header (separate file from content) had another item with static length (50em) and visibility:hidden so as I looked in the page, i couldn't find anything.
Noticed the cause only after taking apart all the header file.
Long story short - if width: 100% is going out of screen and parents are normal size, there MUST be something static size in the content stretching it out. Thorough search will help.
You have meta viewport in your HTML for adjust the scale in mobile browsers?
<meta name="viewport" content="width=device-width, initial-scale=1">
I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/
The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.
Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)
I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling).
I'm pretty sure it's due to a CSS declaration, but I don't know which.
To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.
From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/
I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.
HTML
<body class="home blog">
<div id="main">
<div id="scenes">
...
</div>
<div id="slidewrapper">
<div id="rightsec" class="mainsec">
...
</div>
<div id="leftsec" class="mainsec">
...
</div>
</div>
</div>
</body>
CSS (Sass)
html {
box-sizing: border-box;
font-size: 125%;
text-size-adjust: 100%;
line-height: 1.4;
}
body {
background: #000;
}
#main {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#scenes {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
width: 100%;
margin: auto;
pointer-events: none;
}
#slidewrapper {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.mainsec {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#leftsec {
z-index: 1;
left: calc(60px - 100%);
}
#rightsec {
z-index: 2;
right: calc(60px - 100%);
}
Cheers!
Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.
I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!
I have a checkout system I am designing and I cannot get the footer to not eat the bottom div I have setup, unless I continually adjust the margin-bottom figure.
I have three divs nested into one. These nested divs show/hide as I proceed to the next one. The only one I will ever have an issue with is the last one because it will never be static. I use it to show a customers order, so if they have 10 different products then 10 images, name, price, etc show.
Every other area of my site that gets new things added to it, the footer responds and continuously goes down.
My fiddle isn't the best and my issue is really hard to generate as it isn't a static issue. Two products could be added and it would be fine.
https://jsfiddle.net/pfar54/rc5yffy7/
.footerOut {
width: 100%;
background-color: #202020;
position: relative;
padding-top: 30px;
left: 0px;
right: 0;
margin-bottom: 0px;
bottom: 0px;
clear: both;
}
.footer {
height: 420px;
width: 960px;
}
/*----------Main div for Checkout Process--------*/
.checkoutprocess {
margin-bottom: 150px;
display: relative;
}
I have set everything to relative...added padding: bottom (took it out because it didn't do anything). Everything I try doesn't help.
The height of the container and border are irrelevant as I am just using those to test.
Anyone see why?
I guess Your problem is footer is overlapped with content, And I found some Html Dom Structure issues ans css property Mistakes, I have cleaned up your code please verify this link below in comment