I am building a website with a horizontal layout. There will be a container with text inside which should flow in a fixed height and multiple columns to the right. The columns are set with column-width. My problem is now, that the container's width does not expand equal to the content. As you can see in my Jsfiddle, the main element only takes the viewport width. How can I get the main to expand equal to its content?
https://jsfiddle.net/vahut16y/6/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
}
main {
column-width: 300px;
column-gap: 80px;
column-fill: auto;
height: 70vh;
background-color: cadetblue;
}
<main>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
<p>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</p>
<p>
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum
sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis
hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
</p>
<p>
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus.
Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt
non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac
</p>
<p>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</p>
</main>
Original answer
In the way you're currently doing, instead of expanding it you should allow the content to overflow, to do that just add overflow: auto to the main. (edit: minified html).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
}
main {
column-width: 300px;
column-gap: 80px;
column-fill: auto;
height: 70vh;
background-color: cadetblue;
overflow: auto;
}
<main><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p><p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p><p> Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. </p><p> Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p><p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p></main>
Answer after comments
You made things far more complicated when you said you needed the body to overflow instead of main, here's my second attempt using css only.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-size: 20px;
margin-bottom: 20px;
padding: 0 40px;
}
main {
column-width: 300px;
column-gap: 0;
column-fill: auto;
height: 70vh;
}
div {
background: linear-gradient(90deg, rgba(69, 134, 222, 1) 0%, rgba(88, 81, 219, 1) 20%, rgba(131, 58, 180, 1) 40%, rgba(193, 53, 132, 1) 60%, rgba(225, 48, 108, 1) 80%, rgba(237, 140, 75, 1) 100%);
color: white;
}
<main>
<div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </p>
<p> Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. </p>
<p> Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac </p>
</div>
</main>
As you can see, it behaves the way you described, but with a few problems.
You have to set the spacing with padding and not column-gap.
Linear gradient backgrounds won't work properly.
The background won't fill to the height of the div, but to the text (see the end of div).
There might be other problems aswell, maybe you're better of with a js solution in this case. Also this might be useful when available.
Related
I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.
What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>
I created a header with the position set to sticky and top to 0.
But if I scroll down the page, at some point the header stop scrolling with the page.
I think it's an easy fix, but I'm just too dumb for it...
I tried to remove other elements because I thought they were intersecting with the header, but that didn't really work.
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar">
<div class="navbar"></div>
</header>
I expected the header to be at the top of the viewport the entire time, and not disappearing at some point of scrolling.
Hello Squeez Music and welcome to stackoverflow!
Unfortunately we can't really help you with the problem because you haven't shared enough code. What you have shared should work perfectly fine. To demonstrate I've made a snippet, and you'll see the navbar never disappears.
To get to the bottom of this, it would be a good idea to make a snippet of your own which reproduces the problem you're having. In fact, in the process of doing so you may well figure it out for yourself.
Here's what I'm talking about:
https://stackoverflow.com/help/minimal-reproducible-example
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar" style="padding: 5px">
<div class="navbar">Check out my nav bar</div>
</header>
<div style="padding: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.<br><br>
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.</div>
The header is inside the __body, which is the sticky container. The height of __body is 100% of the body, which is capped at 100vh. Since the content is longer than 100%, the content overflows, and the actual height of the body is larger than 100vh, hence the scroll. Since a sticky item is limited by it's container, the item is scrolled out when it reaches the center (the end of the sticky container).
Example:
body {
height: 100vh;
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
height: 100%;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
The solution is simple to make __body grow with the content.
body {
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
min-height: 100vh;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
I think your problem comes from your grid-template-rows in your __body selector. You have 170% here, your header sticks inside its parent only.
Try with:
.__body {
display: grid;
grid-template-rows: 5.88% 17.64% 23.53% 29.11% 11.76% 11.76%;
You may want to try another unit than % to have something more fluid.
[edit] That's basically what Ori Drori just said :)
I found a way to make it work by giving the header the fixed position instead of sticky and giving it a width and height.
I want to put a static image (height: 100% of viewport, width: auto) next to a scrollable text. I can manage to code it, as long as I put to floating divs with a width of 50% next to another, but then my image gets messed up. It is important, that the image
a) shows a complete height within the viewport
b) the div with the text changes according to the auto width of the image
Just like this:
I believe I was able to achieve the effect that you wanted. I had to use some JS though.
resize();
function resize() {
var image = document.getElementById('image');
var text = document.getElementById('text');
text.style.width = (window.innerWidth - image.width) + 'px';
}
body, html {
margin: 0px;
overflow: hidden;
}
.image {
display: inline-block;
height: 100vh;
}
.text {
position: absolute;
height: 100vh;
right: 0px;
top: 0px;
font-size: 28px;
overflow-y: auto;
}
<html>
<body onresize="resize()">
<img id="image" src="https://www.leonardodavinci.net/images/gallery/mona-lisa.jpg" class="image">
<div id="text" class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</div>
</body>
</html>
What I have
I have the following HTML and CSS:
body {
box-sizing: border-box;
background: rgb(204, 204, 204);
}
#page {
box-sizing: border-box;
background: white;
width: 21cm;
height: 29.7cm;
padding: 2cm;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
content {
text-align: justify;
hyphens: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="page">
<content>
<section>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
<p>Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan
lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit
eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</p>
<p>Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt
non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor.</p>
<p>Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis
orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat,
nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.</p>
<p>Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt
libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In
ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.</p>
<p>Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst.
Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec,
quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.</p>
<p>Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit
leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum
nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh.</p>
<p>Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum
dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum
risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.</p>
<p>Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum
vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat
accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat.
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis
nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</section>
</content>
</div>
</body>
</html>
What I want
I want to let the page look as the print layout as close as possible. More specifically, I don't want the text at the bottom float over the box border, but let it continue on another page. But I don't know how to achieve this.
.container-fluid{
height: 500px;
padding: 0;
}
.kad-logo{
position: absolute;
top: 140px;
left: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img class="kad-logo" src="http://i.imgur.com/SMSxaXd.png" alt="kad">
</div>
<div data-spy="affix" data-offset-top="500">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
When I scroll down I can see the text behind the navbar. Why is this? This only occurs if I use the grid system.
I tried everithing: adjusting background color for navbar, changing z index, rewriting the whole code, and everithing from the forum recommendations.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img class="kad-logo" src="images/kad.png" alt="kad">
</div>
<div data-spy="affix" data-offset-top="500">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
I see you're trying to place an header image above the NavBar, but I guess you want to place it inside it.
So, you can follow Bootstrap's documentation to simply solve the problem. In any case, I tell you how to do.
It's enough to create a div with Navbar Header as class; placing then this:
<a class="navbar-brand" rel="home" href="#" title="Example">
<img src="logo.jpg">
Of course then close the a tag.
If what you're trying to do is something other, please make a fiddle with resources inside, so we can understand better the problem.
As you say, there is a problem about "text" while scrolling down; but I don't see any text, and evermore, I just see a failed-to-load image (of course, it isn't locally stored by my part, because you did a local src).
And so on, in line 8 you haven't really called a CSS file. Because it isn't correct syntax. Please check your CSS file and its location, then link to it like this:
<link rel="stylesheet" href="style.css">
I hope I have helped you.
UPDATE: After comments on this answer, I came to a solution.
I used some Javascript, because it's a bit tricky to achieve this, and with JS works really fine. Please note that if you want to make the space from the logo to the navbar more, you just need to use CSS with height and position vertically the logo. Here is it:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
/* Now you need just this CSS (needs to keep navbar fixed while scrolling) */
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
</style>
</head>
<body>
<header class="masthead">
<div class="container">
<div class="row">
<div class="col-sm-3 logo">
<img src="http://i.imgur.com/SMSxaXd.png" alt="kad">
</div>
</div>
</div>
</header>
<div id="nav"> <!-- Do not remove this div#nav, because it makes everything work properly, using the JS in the bottom and the CSS; in any case if you want you can place JS in your <head>. -->
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Kaszás Attila diákkör</li>
<li>Kezdőlap</li>
<li>Aktuális</li>
<li>Rólunk</li>
<li>Elsősöknek</li>
<li>Galéria</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>Üdvözöllek a Kaszás Attila diákkör új weboldalán!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p>Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem. Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis,</p>
</div>
<div class="col-sm-4">
<h3>Itt lesz a naptár, beágyazott fb, stb.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// You need this to fix the Navbar properly.
$('#nav').affix({
offset: {
top: $('header').height()
}
});
</script>
</body>
</html>
Anyway, it was happening because is tricky place the navbar not at the very top of the page, so text doesn't even knew that there was a navbar, because it was even blocked by your logo container.
Now it's solved, I hope this helped you.
I experienced this same problem (the grid system content overlaying the navbar that was fixed using affix.js), but I solved it by just adding a z_index to the .affix css class, so I have:
.affix {
top: 0;
width: 100%;
z-index: 10;
}
This is a part of Optiroot's answer above, but that answer is so complicated and there are already so many comments to dig through, I wanted to give a simpler version.
I did not need the extra <div id='nav> or the css/javascript for it.