I have a table that is relatively large.
I want a horizontal scroll bar to be displayed when I move the mouse over it.
The current problem is that this scrollbar appears when the page loads, but disappears a second later.
I really want this scrollbar to appear when I move the mouse over it.
This is the actual code, the table is scrollable but the scrollbar is displaying when mouse is hover.
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row, .mat-header-row {
min-width: 1800px;
width: 100%;
}
Wrap your div or table inside another div, <div class="flow"></div> and in stylesheet,
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
Why does this work when I wrap the element and not without being wrapped?
This is something, even I don't know but it has probably something to do with the declaration of width and height I guess.
Here's an example using this method:
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row,
.mat-header-row {
min-width: 1800px;
width: 100%;
}
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
<!DOCTYPE html>
<html>
<head>
<style>
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row,
.mat-header-row {
min-width: 1800px;
width: 100%;
}
</style>
</head>
<body>
<div class="flow">
<div class="mat-header-row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at nisi ut metus pharetra dapibus non non justo. Ut nunc erat, viverra et tellus sed, pellentesque vulputate arcu. Integer viverra eros at nisl lacinia, fermentum tempor dui finibus.</div>
<div class="mat-row">Sed placerat eget massa id suscipit. Fusce sed cursus mi. Praesent sodales enim at elementum feugiat. Pellentesque et bibendum massa. Aliquam ac erat a tellus semper sollicitudin. Aliquam congue sollicitudin est eget viverra.</div>
<div class="mat-row">Maecenas id sapien ac erat imperdiet efficitur eget auctor diam. Ut feugiat lacus dui, sit amet semper sapien consequat quis. Aliquam vitae mollis mauris. Sed a sem suscipit purus placerat semper vel non tortor. Proin pellentesque accumsan vestibulum. Sed id lobortis ipsum. Pellentesque facilisis volutpat libero nec interdum.</div>
</div>
</body>
</html>
My code is working properly.
After some research it seems to be caused by a Chrome bug.
To solve it enter in your search bar :
chrome://flags
And then set Overlay Scrollbars to disabled
You can set it back to auto after that
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Child flex item is overflowing the width of the parent container. I tried setting min-width:0 as well but still it is not working.
Here is my HTML and CSS code :
.parent{
display: flex;
border: 2px solid red;
}
.child1{
background: cyan;
height: 40px;
width: 40px;
flex-shrink: 0;
}
.child2 {
background: pink;
height: 20px;
width: 20px;
}
.child3 {
background: yellow;
height: 20px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class='parent'>
<div class='child1'>1</div>
<div>
<div class='child2'>2</div>
<div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
</div>
</div>
My motive is to prevent the child3 from overflowing the parent container and show ellipsis(...) when it overflows.
Any help is appreciated.
There are a couple of issues with what you posted, but fear not we can sort you out.
What is flex, what is not
First let's look at your markup:
.parent is an element with display: flex. From your naming we might incorrectly assume that its children are:
.child1,
.child2, and
.child3.
…but this is not the case.
The children of .parent are actually:
.child1, and
a classless div.
The classless div has no styles set for it, so .child2 and .child3 are not positioned in a flexbox context. For this reason, your min-width: 0 on .child3 doesn't solve your problem, as that solution only applies for flex children.
Applying min-width in the correct context
To start, let's give that child div a class: .foo.
.foo itself has a block display, but currently it is allowing content (in .child3) to overflow. It is this element on which we want to prevent overflow:
.foo {
min-width: 0;
}
That should be all you need. It seems you're already familiar with why we use min-width to help with this, but just in case you can read about it in CSS Tricks: Flexbox and Truncated Text.
Solution
Below is all of it put together.
.parent {
display: flex;
border: 2px solid red;
}
.foo {
min-width: 0;
outline: 1px solid rebeccapurple;
}
.child1 {
background: cyan;
height: 40px;
width: 40px;
flex-shrink: 0;
}
.child2 {
background: pink;
height: 20px;
width: 20px;
}
.child3 {
background: yellow;
height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
<div class='parent'>
<div class='child1'>1</div>
<div class="foo">
<div class='child2'>2</div>
<div class='child3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.
</div>
</div>
</div>
If you want the exact same results:
.parent{
display: flex;
border: 2px solid red;
}
.child1{
background: cyan;
height: 40px;
width: 40px;
flex-shrink: 0;
}
.child-wrapper{
display:flex;
flex-direction: column;
overflow: hidden;
}
.child2 {
background: pink;
height: 20px;
width: 20px;
}
.child3 {
background: yellow;
height: 20px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class='parent'>
<div class='child1'>1</div>
<div class='child-wrapper'>
<div class='child2'>2</div>
<div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
</div>
</div>
As I said in my comments, you don't have anything limiting the length of your child-3 div. Your min-width:0 is not going to have any effect because that is just saying the div can take up as much space at it wants.
child-3 (and child-2 by the way) doesn't have any parent so there is nothing to limit it and therefore it is using all of the available width.
You need to give the child a flex parent with overflow:hidden that will then set a limit on its width. Assuming you want the same parent type, you can do the following:
UPDATE: the code below, you can use the same parent class to wrap your child-2 and child-3, making it act the same way:
.parent {
display: flex;
border: 2px solid red;
overflow: hidden;
}
.child1 {
background: cyan;
height: 40px;
width: 40px;
flex-shrink: 0;
}
.child2 {
background: pink;
height: 20px;
width: 20px;
}
.child3 {
background: yellow;
height: 20px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class='parent'>
<div class='child1'>1</div>
<div class='parent'>
<div class='child2'>2</div>
<div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat
elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper
orci erat eu orci.
</div>
</div>
</div>
When hovering a div, I want to display a full-page div with a background image and text on top. The hovered div should then stay on top of everything. This works so far, with the only exception that I can’t figure out how to make the overflow text scrollable.
Any ideas how to make this work?
JSFiddle
html:
<div class="container">
<div class="title">Show content</div>
<div class="content">
<div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
<div class="infocontainer">
<div class="info">
Lorem Ipsum...
</div>
</div>
</div>
</div>
css:
.container {
position: fixed;
left: 50%;
top: 10%;
}
.content {
display: none;
}
.title:hover + .content {
display: block;
width: 100%;
height: 100%;
}
.title:hover {
position: relative;
z-index: 3;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.infocontainer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
overflow: scroll;
}
.info {
height: 100%;
padding-right: 70%;
}
UPDATE: When I put .info on top with z-index, it becomes scrollable but I get a flickering effect because .title:hover gets over overridden. See: jsfiddle.net/dm41eo5z
You can't hover to make something appear over the whole page, because as soon as it is over the whole page you are no longer hovering the original thing (that's why your example above flickers) and it will disappear. If you use a JavaScript Event listener (such as onMouseOver) you could make it appear by adding a class with a "display: absolute" or "block" or whatever you want it to do. Then it would stay open until you use some other event listener (such as "Click" on an X) to close the element.
The .content div disappears as soon as you stop hovering the .title. To prevent that, continue showing .content while you hover it:
.title:hover + .content, .content:hover {
display: block;
width: 100%;
height: 100%;
}
Note: to hide .content, the user will have to move the cursor out of the screen.
Demo:
.container {
position: fixed;
left: 50%;
top: 10%;
}
.content {
display: none;
}
.title:hover + .content, .content:hover {
display: block;
width: 100%;
height: 100%;
}
.title:hover {
position: relative;
z-index: 3;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.infocontainer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
overflow: scroll;
}
.info {
height: 100%;
padding-right: 70%;
}
<div class="container">
<div class="title">Show content</div>
<div class="content">
<div class="background"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/800px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg"></div>
<div class="infocontainer">
<div class="info">
Pellentesque venenatis tempor ultrices. Nunc maximus erat vel tellus vestibulum, id auctor justo tristique. Ut volutpat eu tellus ut vulputate. Cras id finibus massa. Quisque neque lacus, pretium sed luctus in, semper ut quam. Donec elementum volutpat elementum. Morbi nibh nunc, scelerisque congue turpis nec, lacinia venenatis tortor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi quis magna urna. Etiam tincidunt velit lacus, ac blandit ex pretium nec. Nulla semper erat ut tortor luctus, sit amet suscipit felis ullamcorper. Etiam laoreet, mauris ut volutpat pellentesque, velit neque euismod sem, in condimentum mauris orci nec nibh. Vivamus ac sem et turpis pellentesque volutpat ac ac ligula. Phasellus feugiat dapibus maximus. Donec eros felis, suscipit eu neque quis, sagittis faucibus ipsum. Nam auctor molestie quam nec tristique. Aliquam dolor velit, condimentum in vehicula ut, pretium sed leo. Proin sit amet quam nunc.
Integer eu orci quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed felis vitae justo faucibus blandit at a dolor. Curabitur id nisi nec elit aliquam convallis nec eu est. Aenean viverra id diam ac accumsan. Praesent tempor, magna eget molestie sodales, neque libero pretium magna, id euismod justo erat at est. Phasellus ultrices metus et massa varius, at rutrum augue pretium. Mauris ultrices felis et magna luctus sodales. Curabitur sodales pellentesque ante auctor molestie. Donec sed massa scelerisque elit auctor lacinia ac vel risus. In eleifend vulputate sapien a tristique. Nam eleifend rutrum metus.
</div>
</div>
</div>
</div>
Thank you for your replies so far but they don't exactly achieve what I'm looking for. Is there maybe a way to keep .title on top but specifically target .info for scrolling?
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I have some content in a nested column whose parent is a nested flex container:
body,
html,
.container {
height: 100%;
}
body {
color: #fff;
}
.container {
display: flex;
overflow: hidden;
}
.sidebar {
width: 200px;
flex-shrink: 0;
background: red;
}
.main {
flex: 1;
display: flex;
}
.content {
flex: 1;
background: blue;
}
.scroll {
overflow-x: auto;
}
.overflowing {
width: 1024px;
}
.panel {
width: 100px;
flex-shrink: 0;
background: green;
}
<div class="container">
<div class="sidebar"></div>
<div class="main">
<div class="content">
<div class="scroll">
<div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
</div>
</div>
<div class="panel"></div>
</div>
</div>
The content has to be fixed-width (for whatever reason). On narrower viewports (like the one in the preview above) it's wider than its container, so I want it to scroll horizontally. I thought it would be as easy as wrapping it in a <div> with overflow-x: auto, but for some reason the content is pushing the right panel off-screen (you can see the panel if you view the result in full-screen).
This seems to happen only if the flex container is nested and the content's width is fixed. How can I prevent the panel from being pushed away?
Updated Answer
The original answer to this question is unnecessarily complex.
The simple truth is that flex items, by default, are min-width: auto. This means they cannot shrink below the size of their content.
That's why a horizontal scroll bar doesn't render in the blue text element. The content is unable to overflow because the item is always expanding to accommodate its content.
The solution is to override min-width: auto with min-width: 0.
.main {
min-width: 0; /* NEW */
}
.content {
min-width: 0; /* NEW */
}
jsFiddle demo
More details here: Why doesn't flex item shrink past content size?
Original Answer
The problem you're describing in your question doesn't exist in Chrome 47 or IE11. The code preview, whether small or full-screen, shows all three panels and horizontal scroll. It does what you want.
In Firefox and Chrome 48, however, there's clearly a problem. There's no horizontal scroll, and the right panel (green), is pushed off screen in the small preview.
These are bugs in Firefox and Chrome 48.
Here's the fix:
To enable a horizontal scrollbar in flexbox in FF/Chrome 48 add min-width: 0; to the parent(s) of the scrolling items.
(optional) To enable a vertical scrollbar add min-height: 0.
The above is a cross-browser solution; it doesn't appear to have any effect on non-buggy browsers. Hence, adding both min-width: 0 and min-height: 0 to your production code should be okay.
body,
html,
.container {
height: 100%;
}
body {
color: #fff;
}
.container {
display: flex;
overflow: hidden;
}
.sidebar {
width: 200px;
flex-shrink: 0;
background: red;
}
.main {
flex: 1;
display: flex;
min-width: 0; /* NEW */
}
.content {
flex: 1;
background: blue;
min-width: 0; /* NEW */
}
.scroll {
overflow-x: auto;
}
.overflowing {
width: 1024px;
}
.panel {
width: 100px;
flex-shrink: 0;
background: green;
}
<div class="container">
<div class="sidebar"></div>
<div class="main">
<div class="content">
<div class="scroll">
<div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
</div>
</div>
<div class="panel"></div>
</div>
</div>
Bug reports:
https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
https://github.com/angular/material/issues/6841
https://code.google.com/p/chromium/issues/detail?id=580196
so i'm confused as to why my footer section is hidden. I assume it is because the body is set to overflow: hidden, but it needs to be this way in order for the off-canvas menu to work. If I remove overflow: hidden on the body then the menu bar disappears when scrolling. I just don't understand why the footer section isn't showing since it is inside of the body element. Any ideas how to fix this problem?
Here is a JSFiddle:
https://jsfiddle.net/b18wmdzg/
Html
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
</nav>
<nav class="menu-side main-navigation" id="site- navigation">
Home
page 2
page 3
</nav>
</div>
<div class="menu-bar">
<button class="menu-button" id="open-button">menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content content-wrap">
<div class="dummy-content">
<p>hoaubobaowbeobafohweofhwohfowuheofhowehfowhohfohwfohohohohohohohohoh</p>
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
`
CSS
html, body {
overflow: hidden;
width: 100%;
height: 100%;
background: #2a3032;
}
.container {
height: 100%;
}
.menu-wrap {
position: fixed;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.main-navigation {
background: none !important;
width: 240px !important;
clear: both;
display: block;
float: left;
}
.menu-bar {
width: 100%;
height: 6rem;
}
.container > .content-wrap {
background: #f8f7ee;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.container, .content-wrap {
height: 100%;
width: 100%;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
}
overflow: hidden means that anything beyond the bounds of the element is hidden; no scrolling. In this case, the html and body elements default to the dimensions of the window, and your footer is beyond those dimensions, so it is cut off.
My suggestion is that if you want your navigation bar to remain at the top of the screen, you give it a fixed position:
html, body {
background: #2a3032;
}
.menu-bar {
width: 100%;
height: 6rem;
position: fixed;
top: 0;
left: 0;
background: #2a3032;
z-index: 10;
}
.site-content {
background: #f8f7ee;
}
#content {
margin-top: 6rem;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
color: #fff;
}
<body>
<div class="container">
<div class="menu-bar">
<button class="menu-button" id="open-button">Menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content">
<div class="dummy-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec congue magna. Sed ullamcorper velit id dolor congue convallis. In massa est, gravida a eros vitae, ornare aliquet nunc. Mauris elementum enim ut dapibus scelerisque. Etiam luctus orci id quam congue finibus. Proin consequat dapibus porttitor. Etiam pretium consectetur nibh non porttitor. Donec in leo sit amet neque cursus sagittis nec vel est. Morbi metus libero, suscipit in fringilla nec, molestie ut diam. Sed rutrum magna vitae orci pellentesque, non feugiat nibh sollicitudin.
<p>Aliquam eget efficitur eros, eu egestas mauris. Morbi vel vehicula arcu. Integer viverra ipsum sed turpis laoreet dictum a vitae ex. Cras lectus libero, pellentesque quis nisi quis, tristique lobortis ante. Maecenas mattis ligula eget dui ultrices tristique. Sed in consectetur mauris. Fusce vulputate lacinia quam, sed ornare massa consequat in. Ut et turpis dui. Sed vitae diam vel sapien commodo mollis. Curabitur ante odio, tempor vel augue rhoncus, volutpat ultrices est. Curabitur nibh ipsum, dapibus et dignissim ut, faucibus eget nulla. Phasellus eget turpis rhoncus, pellentesque eros quis, iaculis quam. Nam laoreet felis sed nisi iaculis sagittis.
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
</body>
If you want to have another menu that opens on top of the first menu, then you can give it a larger z-index.
In general you want to avoid nested scroll bars; if something scrolls it should be the page as a whole, not individual elements.
the main problem is setting :
.content-wrap {
height: 100%;}
whenever you set height to 100% you need to think on what that means.. in your case it meant 100% of windowHeight, and since you had another div on top your footer this was pushed below the bottom ,
here's a working fiddle
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 8 years ago.
I'm building a web page that will have a fixed header. Currently the fixed header is not staying in it's parent at width: 100% and it its hiding behind the content on the page. I understand position:fixed takes the element out the normal flow of things, but I'm not sure how to fix this. I'm looking for a fix that will be have well resizing to different screen sizes. Here's my jsfiddle http://jsfiddle.net/claireC/7hnbc/1/ and codes below
html:
<header>
<nav>
<p class="navLinks navFloat">link</p>
<a class="navLinks" href="#">link</a>
<p class="navLinks">link</p>
</nav>
</header>
<div class="content">
<p class="aboutMe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget eros ut quam mollis dignissim. Nullam ultrices nisl vitae urna adipiscing vulputate. Sed ut ligula quam. Aenean lorem nunc, vulputate eget nisi ut, blandit feugiat dui. Aliquam tempor ornare felis at venenatis. Vivamus vel pulvinar turpis, vitae imperdiet nunc. Nulla purus leo, euismod eget velit eu, rutrum commodo sem. Ut eleifend sem sed purus pharetra lacinia. Donec id lacus sodales erat interdum pharetra non at purus. Proin dignissim est at leo volutpat venenatis. Phasellus pellentesque turpis vel velit blandit, non egestas purus hendrerit. Pellentesque eget massa at nisl lobortis tempor. Cras orci tellus, egestas a mauris sit amet, consectetur euismod lorem. Suspendisse faucibus odio quis leo fringilla, hendrerit hendrerit tortor luctus. Integer quis pulvinar lacus.
</p>
</div>
</div>
css:
html, body{
height: 100%;
}
body{
position: relative;
font-family: Helvetica;
}
.wrapper{
margin: 0 auto;
min-height: 100%;
width: 1280px;
background-color: red;
}
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
}
nav{
width: 376px;
margin: 0 auto;
background-color: #000;
overflow: auto;
}
.navLinks{
display: inline-block;
}
.content{
position: relative;
background-color: blue;
padding-bottom: 226px;
text-align: center;
}
.aboutMe{
font-size: 50px;
margin: 0 auto;
width: 676px;
}
a{
text-decoration: underline;
}
Could you maybe discribe the problem a bit better? Works fine for me, did you try it in multiple browsers?
May it be because you haven't set a z-index?
EDIT:
Adding a z-index to the Header worked for me:
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
z-index: 999;
}