Black stripe largest 10% of the maximum height of the screen

Question

I need to create a black "bar" on the top. The black stripe must be 10% of the maximum height the browser can reach. I need to lock the stripe to allow page scrolling and keep bar on the page.

This is something similar to youtube top bar.

I tried this:

.Header {
position:fixed;
display: flex;
top:0;
left:0;
width:100%;
height: 10%;
background-color:#333333;
}

but this let me have 10% of the actual maximum size, if I stretch the window the height size changes, I need to lock 10% of maximum size I can reach

What have you tried? What problem(s) have you encountered? Please share your code. — Shaggy, Nov 30 '15 at 23:47
@Shaggy I posted my code, I need to have 10% of the maximum size — user4789408, Nov 30 '15 at 23:52
@AdamBuchananSmith It doesn't work, if I stretch my browser window the size of black stripe changes — user4789408, Nov 30 '15 at 23:54
So you want it to be 10% of what then? Your total page height? — Adam Buchanan Smith, Nov 30 '15 at 23:56

user3495690 · Answer 1 · 2015-12-01T00:06:58.150

1

I would recommend having fixed heights using media queries to avoid distortion across devices (see https://css-tricks.com/snippets/css/media-queries-for-standard-devices/).

However, if you insist on having it set to 10% of the height on page load, the easiest way would be to use jQuery:

$(document).ready(function () {
    $(".bar").height($(window).height()*0.1);
});

See here for example: https://jsfiddle.net/61hvr079/

edited Dec 01 '15 at 00:06

answered Dec 01 '15 at 00:01

user3495690

576
3
15

I'm using dreamweaver with fluid and responsive implementations, I am a jQuery newbie, I would avoid using it if there is another solution – user4789408 Dec 01 '15 at 00:06
@user4789408 Hmm.. Well, I would still definitely recommend using media queries to avoid the problem all together (and likely avoid problems down the road when screens of all sizes try to visit your website and the contents of .bar are distorted due to the dynamic height setting). But if you're willing to settle for *restricting* the maximum height of the div, you could use the max-height property and set it to a certain number of **px** (or perhaps even **em** if you want it to change for mobile) – user3495690 Dec 01 '15 at 00:13

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

Have you looked at How to make the Navigation bar not move when window scrolled down CSS? ? They recommend position:absolute for better viewing on mobiles.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 30 '15 at 23:55

kmwarren

1
1

score 0 · Answer 3 · answered Nov 30 '15 at 23:56

0

If you have a <div class='bar'>, then the CSS to get a full-width, fixed-position black bar that's 10% of view height would be:

    .bar {
     width: 100vw;
     height: 10vh;
     background-color: black;
     position: fixed;
     top: 0;
     left: 0;
   }

answered Nov 30 '15 at 23:56

Alex Pearson

103
7

It doesn't work, I need to have 10% of the size, if I stretch the window the black stripe changes his size, I don't want to – user4789408 Dec 01 '15 at 00:05
I'm not sure what you mean by 10% of the size, then, if not view height. Perhaps you're looking for different fixed heights across a few breakpoints? – Alex Pearson Dec 01 '15 at 00:55

Black stripe largest 10% of the maximum height of the screen

3 Answers3