The positioning of the left div and footer as fixed is experiencing technical difficulties

Question

The positioning of the left div and footer as fixed is experiencing technical difficulties

I have been trying to keep the left div and footer fixed in position while allowing the content of the right div to scroll accordingly on page scroll. In my case, I managed to fix the left div and footer, but the content inside the left div is not scrolling up or down as desired. Please refer to the attached image for a better understanding.

I want the sidebar to scroll along with the page scroll, without setting overflow-y: auto explicitly, and the footer should always remain fixed at the bottom of the page.

For further clarity, I am including a screenshot of my current implementation below.

#wrapper {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}

#sidebar-wrapper {
  height: 100%;
  padding: 0px;
  position: fixed;
  border-right: 1px solid #ddd;
  z-index: 1000;
}

#sidebar {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

#main-wrapper {
  height: 100%;
  padding: 0px;
}

#main {
  position: relative;
  height: 100%;
  padding: 0px;
}

#sidebar .list-group-item {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.footer {
  background-color: #ffffff;
  bottom: 0;
  position: fixed;
  padding: 10px 0px;
  border-top: 1px solid #ddd;
}

@media (max-width: 992px) {
  body {
    padding-top: 0px;
  }
}

@media (min-width: 992px) {
  #main-wrapper {
    float: right;
  }
}

@media (max-width: 992px) {
  #main-wrapper {
    padding-top: 0px;
  }
}

@media (max-width: 992px) {
  #sidebar-wrapper {
    position: static;
    height: auto;

   /**
   * To make this work
   */
   max-height: calc(100vh - YOUR_FOOTER_HEIGHT);

    border-right: 0;
  }
}

...and so on...

Your feedback and suggestions based on the provided image are highly appreciated!

Click here to view the working reference image.

html css twitter-bootstrap

Answer 1

Answer №1

Web Development -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">
    </script>
    <div id="wrapper">
        <div class="col-lg-2 col-md-6 col-xs-12" id="sidebar-wrapper">
            <div id="sidebar">
                <div class="col-xs-12 col-sm-12 mb20">
                    <img class="profile-image" src="primage.png">
                    </img>
                </div>
                <h3>
                    General Information
                </h3>
                <ul class="profile-details">
                    <li>
                        <div>
                            <i class="fa fa-building-o">
                            </i>
                            Party Name
                        </div>
                        Congress
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-briefcase">
                            </i>
                            position
                        </div>
                        Party President
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-briefcase">
                            </i>
                            Winner
                        </div>
                        Rank No.1
                    </li>
                </ul>
                <h3>
                    Contact Information
                </h3>
                <ul class="profile-details">
                    <li>
                        <div>
                            <i class="fa fa-phone">
                            </i>
                            phone
                        </div>
                        +91 022 28106240
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-tablet">
                            </i>
                            mobile phone
                        </div>
                        +91 9819046204
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-envelope">
                            </i>
                            e-mail
                        </div>
                        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d1f2c2538210d3f2829242b2b202c2421632e2220">[email protected]</a>
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-map-marker">
                            </i>
                            current address
                        </div>
                        B-301,Akansha Tower
                        <br>
                            Naya Nagar, Mira Road - E
                            <br>
                                Dist. Thane - 401107.
                            </br>
                        </br>
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-map-marker">
                            </i>
                            permanent address
                        </div>
                        B-301,Akansha Tower
                        <br>
                            Naya Nagar, Mira Road - E
                            <br>
                                Dist. Thane - 401107.
                            </br>
                        </br>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-lg-10 col-md-6 col-xs-12 pull-right" id="main-wrapper">
            <div id="main">
                <div class="col-lg-12">
                    ht ht
                </div>
            </div>
        </div>
        <div class="col-md-12 footer">
            ht ht
        </div>
    </div>
</link>

CSS Styling -

#wrapper {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}

#sidebar-wrapper {
  height: 100%;
  padding: 0px;
  position: fixed;
  border-right: 1px solid #ddd;
  z-index: 1000;
}

#sidebar {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

#main-wrapper {
  height: 100%;
  padding: 0px;
}

#main {
  position: relative;
  height: 100%;
  padding: 0px;
}

#sidebar .list-group-item {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.footer {
  background-color: #ffffff;
  bottom: 0;
  position: fixed;
  padding: 10px 0px;
  border-top: 1px solid #ddd;
}

@media (max-width: 992px) {
  body {
    padding-top: 0px;
  }
}

@media (min-width: 992px) {
  #main-wrapper {
    float: right;
  }
}

@media (max-width: 992px) {
  #main-wrapper {
    padding-top: 0px;
  }
}

@media (max-width: 992px) {
  #sidebar-wrapper {
    position: static;
    height: auto;
    max-height: 300px;
    border-right: 0;
  }
}

Your code has been reviewed and corrected for proper implementation. Your HTML structure is now correctly organized to ensure the Bootstrap framework functions as intended.

Answer 2

Web Development -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js">
    </script>
    <div id="wrapper">
        <div class="col-lg-2 col-md-6 col-xs-12" id="sidebar-wrapper">
            <div id="sidebar">
                <div class="col-xs-12 col-sm-12 mb20">
                    <img class="profile-image" src="primage.png">
                    </img>
                </div>
                <h3>
                    General Information
                </h3>
                <ul class="profile-details">
                    <li>
                        <div>
                            <i class="fa fa-building-o">
                            </i>
                            Party Name
                        </div>
                        Congress
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-briefcase">
                            </i>
                            position
                        </div>
                        Party President
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-briefcase">
                            </i>
                            Winner
                        </div>
                        Rank No.1
                    </li>
                </ul>
                <h3>
                    Contact Information
                </h3>
                <ul class="profile-details">
                    <li>
                        <div>
                            <i class="fa fa-phone">
                            </i>
                            phone
                        </div>
                        +91 022 28106240
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-tablet">
                            </i>
                            mobile phone
                        </div>
                        +91 9819046204
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-envelope">
                            </i>
                            e-mail
                        </div>
                        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d1f2c2538210d3f2829242b2b202c2421632e2220">[email protected]</a>
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-map-marker">
                            </i>
                            current address
                        </div>
                        B-301,Akansha Tower
                        <br>
                            Naya Nagar, Mira Road - E
                            <br>
                                Dist. Thane - 401107.
                            </br>
                        </br>
                    </li>
                    <li>
                        <div>
                            <i class="fa fa-map-marker">
                            </i>
                            permanent address
                        </div>
                        B-301,Akansha Tower
                        <br>
                            Naya Nagar, Mira Road - E
                            <br>
                                Dist. Thane - 401107.
                            </br>
                        </br>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-lg-10 col-md-6 col-xs-12 pull-right" id="main-wrapper">
            <div id="main">
                <div class="col-lg-12">
                    ht ht
                </div>
            </div>
        </div>
        <div class="col-md-12 footer">
            ht ht
        </div>
    </div>
</link>

CSS Styling -

#wrapper {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}

#sidebar-wrapper {
  height: 100%;
  padding: 0px;
  position: fixed;
  border-right: 1px solid #ddd;
  z-index: 1000;
}

#sidebar {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

#main-wrapper {
  height: 100%;
  padding: 0px;
}

#main {
  position: relative;
  height: 100%;
  padding: 0px;
}

#sidebar .list-group-item {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.footer {
  background-color: #ffffff;
  bottom: 0;
  position: fixed;
  padding: 10px 0px;
  border-top: 1px solid #ddd;
}

@media (max-width: 992px) {
  body {
    padding-top: 0px;
  }
}

@media (min-width: 992px) {
  #main-wrapper {
    float: right;
  }
}

@media (max-width: 992px) {
  #main-wrapper {
    padding-top: 0px;
  }
}

@media (max-width: 992px) {
  #sidebar-wrapper {
    position: static;
    height: auto;
    max-height: 300px;
    border-right: 0;
  }
}

Your code has been reviewed and corrected for proper implementation. Your HTML structure is now correctly organized to ensure the Bootstrap framework functions as intended.

The positioning of the left div and footer as fixed is experiencing technical difficulties

Answer №1

Similar questions

Transferring a JavaScript element's ID to PHP

Retrieve the initial N <tr> elements that contain <td> elements as their children through the power of jQuery

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

Is there a way to upload an image without utilizing or concealing the `<input type='file' />` element?

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

How can we effectively override the automatic contrasting color determination of buttons based on their background in Boostrap v5.2 SCSS compilation?

Searching for the dimensions of an SVG file using code - is that possible?

What is the best way to make this CSS arrow see-through?

Particles.js is functioning properly in a .html file, however, it is not working in an .ejs file

Navbar brand in Bootstrap 4 not centered when navbar is collapsed

What is the best storage location for div elements used in jQuery Mobile pop-up functionality?

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Conflicting media queries

Disorderly arrangement of HTML elements

Modify the drop-down value based on the selection of a checkbox in HTML

Increase the gap between vertically aligned columns in Bootstrap 4 by adding spacing

Receive the latest order details following jQuery Sort

Switch videos within the video tag as you scroll

Troubleshoot: CSS Paths Broken after Deploying Django App on AWS Elastic Beanstalk

Using multiple elements with jquery insertBefore