CODEWITHSUNDEEP
css
STORM
STORM

Reputation: 4331

How to fix top div and bottom when scrolling page?

I want to create a simple one column div based html/css structure. But i am a little bit stuck and get no further. There seems to be multiple ways like box-mode, flexbox, etc. What is the simplest way of doing this?

What i want to do is

  1. Divs should be 750px width and centered on screen but the inner Divs should be 100% in width
  2. The Top and the Bottom Div should be fixed at topa and bottom

https://codepen.io/bogazci/pen/GRqKWLN?editors=1100

body {
  margin:0;
  padding:0;
  width:750px;
}

#this-div-is-fixed-at-top {
  background-color:grey;
}

#this-div-is-fixed-at-bottom{
    position: fixed;
}
#articles {
  height:500px;
  background-color:olive;
}
#about {
  height:200px;
  background-color:green;
}
#news {
  height:300px;
  background-color:blue;
}
#this-div-is-fixed-at-bottom {
  background-color:grey;
}
.white{
  background-color:#fff;
}
.red{
  background-color:red;
}
.navy{
  background-color:navy;
}
<div id="this-div-is-fixed-at-top">
  <div class="red">#1 I AM 750 PX with for my content but 100% screen width</div>
  <div class="white">#2 I AM 750 PX with for my content but 100% screen width</div>
  <div class="navy">#3 I AM 750 PX with for my content but 100% screen width</div>
</div>

<div id="articles">
  Here are the articles an this and all the other DIVs are 750px width
</div>

<div id="about">
  xxyyzz and all the other DIVs are 750px width
</div>

<div id="news">
  ++--**// and all the other DIVs are 750px width
</div>

<div id="this-div-is-fixed-at-bottom">
  <div>(C) 2021 none and all the other DIVs are 750px width</div>
  <div>some last notes</div>
</div>

Upvotes: 0

Views: 321

Answers (1)

TFLLL
TFLLL

Reputation: 26

Like this? Very straightforward solution, not the most elegant or modern, but it works.

I just added a main container div, added position: fixed to header and footer and positionned and sized them as asked.

* {
  box-sizing: border-box;
}

.main-container {
  margin:auto;
  padding:0;
  width:750px;
}

#this-div-is-fixed-at-top {
  background-color:grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}

#this-div-is-fixed-at-top div {
  width: 750px;
  margin: auto;
}

#this-div-is-fixed-at-bottom {
  background-color:grey;
  position: fixed;
  bottom: 0;
  width: 750px;
}

#articles {
  height:500px;
  background-color:olive;
}
#about {
  height:200px;
  background-color:green;
}
#news {
  height:300px;
  background-color:blue;
}

.white{
  background-color:#fff;
}
.red{
  background-color:red;
}
.navy{
  background-color:navy;
}
<div class="main-container">
  <div id="this-div-is-fixed-at-top">
        <div class="red">#1 I AM 750 PX with for my content but 100% screen width</div>
        <div class="white">#2 I AM 750 PX with for my content but 100% screen width</div>
        <div class="navy">#3 I AM 750 PX with for my content but 100% screen width</div></div>

  <div id="articles">
    Here are the articles and all the other DIVs are 750px width
  </div>

  <div id="about">
    xxyyzz and all the other DIVs are 750px width
  </div>

  <div id="news">
    ++--**// and all the other DIVs are 750px width
  </div>

  <div id="this-div-is-fixed-at-bottom">
    <div>(C) 2021 none and all the other DIVs are 750px width</div>
    <div>some last notes</div>
  </div>
</div>

Upvotes: 1

Related Questions