Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list.

How can I make that area scroll down while keeping the inner-header/footer fixed within the content?

I hope my query is understandable. Thank you

  * {outline: 0; margin: 0; padding: 0; }
        html, body, form { height: 100% !important; margin: 0; padding: 0;}
        body {line-height: 1.6; padding-top: 50px; margin-bottom: 50px;}
        footer {background-color: #212934;padding: 10px 0;width: 100%;position: fixed;height: 50px;bottom: 0px !important;}
        .the-box {height: 100%; min-height: 600px;padding: 0px;background: #fff; margin: 0px 0 !important; margin-bottom: 50px !important; }
        .inner-heder {background: #000;color: #fff;}
        .inner-footer {background: #ccc;color: #fff }
    <!-- Latest Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <!-- Latest compiled and minified jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <form id="form1" runat="server">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Start Bootstrap</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        <div class="container">
            <div class="inner-heder">
                <div class="static-top">
                    Inner-header content here
                </div>
                <div class="scroll-only-me">
                <select id="testlist" size="60" style="width: 100%;">
                  <!-- options truncated for brevity -->
                </select>
                </div>
            <div class="inner-footer">
                Inner-footer content here
            </div> <!-- /.inner-footer -->
        </div> <!-- /.the-box -->
    </div> <!-- /.container -->

    <footer class="hidden-xs" style="width: 100%;position: fixed;height: 50px;bottom:0px !important;">
        <p>Footer text here</p>
    </footer>
</form>

htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

 * {
        outline: 0;
        margin: 0;
        padding: 0;
    }
    
    html,
    body,
    form {
        height: 100% !important;
        margin: 0;
        padding: 0;
    }
    
    body {
        line-height: 1.6;
        padding-top: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }
    
    footer {
        background-color: #212934;
        width: 100%;
        flex: 0;
        min-height: 30px;
        line-height: 30px;
        color: #FFF;
        text-align: center;
    }
    
    .the-box {
        height: 100%;
        min-height: 600px;
        padding: 0px
        background: #fff;
        margin: 0px 0 !important;
        margin-bottom: 50px !important;
    }
    
    #form1 {
        display: flex;
        flex-direction: column;
    }
    
    .navbar {
        flex: 0;
        min-height: 50px;
        border-radius: 0 !important;
        margin-bottom:0 !important;
    }
    
    .inner-heder {
        background: #000;
        color: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .inner-container {
        flex: 1;
        height: 100%;
        overflow: hidden;
    }

    .static-top{
    flex: 0;
    min-height: 20px;
    }
    #testlist {
        color: #000;
        flex: 1;
    }
    .inner-footer {
        background: #ccc;
        color: #fff;
        flex: 0;
        min-height: 24px;
    }
<!-- Latest Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <!-- Latest compiled and minified jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

   <form id="form1" runat="server">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Start Bootstrap</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
        <div class="container inner-container">
            <div class="inner-heder">
                <div class="static-top">
                    Inner-heder content here
                </div>
                <select id="testlist" size="60">
                   <!-- List of options not included for clarity -->
                </select>
                <div class="inner-footer">
                    Inner-footer content here
                </div>
                <!-- /.inner-footer -->
            </div>
            <!-- /.the-box -->
        </div>
        <!-- /.container -->
        <footer class="hidden-xs">
            Footer text here
        </footer>
    </form>

Answer №2

Looking for a website layout that includes a fixed header and footer, along with scrollable content similar to the example provided?

Check out my updated response for more detailed information.

Experience the live demo here:

body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
(inner_footer...)</pre>
(pre tags..)   
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="38588934" l="3.0" c="1469522438" m="1469539886" v="1" a="U2F5ZWQgUmFmZWVx" ai="1969919">
<p>In need of a website design featuring a fixed header and footer, as well as scrollable content similar to the provided example?</p>

<p><strong>Check out my recent updates for more detailed information.</strong></p>

<p><strong>Explore the live demo here:</strong></p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
(inner_footer...)</pre>
(pre tags..)   
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="38588934" l="3.0" c="1469522438" m="1469539886" v="1" a="U2F5ZWQgUmFmZWVx" ai="1969919">
<p>Seeking a website design with a fixed header and footer, along with scrollable content like the example provided?</p>

<p><strong>Take a look at my updated response for more details.</strong></p>

<p><strong>Experience the live demo here:</strong></p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
(inner_footer...)</pre>
(pre tags..)   
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="38588934" l="3.0" c="1469522438" m="1469539886" v="1" a="U2F5ZWQgUmFmZWVx" ai="1969919">
<p>Do you require a website layout with a fixed header and footer, as well as scrollable content similar to the example shown here?</p>

<p><strong>Check out my revised response for more information.</strong></p>

<p><strong>Experience the demo here:</strong></p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
(inner_footer...)</pre>
(pre tags..)   
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="38588934" l="3.0" c="1469522438" m="1469539886" v="1" a="U2F5ZWQgUmFmZWVx" ai="1969919">
<p>Are you looking for a website layout with a fixed header and footer, along with scrollable content similar to this demonstration?</p>

<p><strong>Take a look at my updated answer for more details.</strong></p>

<p><strong>View the demo here:</strong></p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
(inner_footer...)</pre>
(pre tags..)   
</div>
</div>
</p>
    </div></answer2>
<exanswer2><div class="answer" i="38588934" l="3.0" c="1469522438" m="1469539886" v="1" a="U2F5ZWQgUmFmZWVx" ai="1969919">
<p>Need a website layout with fixed header and footer and scrollable content like this demo?</p>

<p><strong>I have updated my answer please check it once.</strong></p>

<p><strong>Demo here:</strong></p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 15px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.inner_header {
    position: absolute;
    top: 50px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    background-color: #2bde73;  
}
.inner_footer {
    position: absolute;
    bottom: 30px;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    text-align: center;
    padding: 10px;
    margin: 0; 
    background-color: #2bde73;
}
.content {
    position: fixed;
    top: 90px;
    left: 0;
    bottom: 50px;
    right: 0;
    overflow: auto;
}
.select {
    overflow: hidden;
    width: 100%;
    padding: 5px 0;
}
.footer {
    position: absolute;
    left:0;
    right:0;
    bottom: 0;
    width: 100%;
    background-color: #222;
    border-color: #080808;
    color: #fff;
    height: 30px;
    font-size: 12px;
    padding: 5px 0;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation
        </span>
        <span class="icon-bar">
        </span>
        <span class="icon-bar">
        </span>
        <span class="icon-bar">
        </span>
      </button>
      <a class="navbar-brand" href="#">Start Bootstrap
      </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">About
          </a>
        </li>
        <li>
          <a href="#">Services
          </a>
        </li>
        <li>
          <a href="#">Contact
          </a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav> 
<div class="content">
  <select id="testlist" class="select" size="60">
    <option value="0">Please select
    </option>
    <option value="1">Item #1
    </option>
    <option value="2">Item #2
    </option>
    (more options...)
    <option value="58">Item #58
    </option>
  </select>                
</div>
<div class="inner_header">Inner Header Section</div>
<div class="inner_footer">Inner Footer Section</div>
<div class="footer">Copyright © Test 2016</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Exploring the IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to compile a list of all styles in the current document is quite simple. Does anyone have any suggestions on how to generate a list of only th ...

htmlcsstwebbrowser

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Hey there, I'm currently utilizing the Google Maps Node.js client web API and want to showcase a map on my HTML views using AngularJS 2. I have a server export that sends an object to my AngularJS2 client service const googleMapsClient = require(&ap ...

htmlnode.jsgoogle-mapsangular

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

htmlcss

What is the best way to achieve varying margins when adding divs in CSS?

Encountering CSS margin issues when adding new divs. Desiring a large margin between the Create Div button and minimal margin between Example Text Here. The desired outcome Margin is too small between Create Div button and Example Text Here, but good bet ...

javascripthtmlcss

How can I use an ajax get request to retrieve a css file from a webpage and then customize the default styles in my program?

Here is my current code snippet: HTML: <h1>Test Message</h1> Default CSS: h1{ font-size: 24px; } Jquery: $(document).ready(function(req, res){ $.ajax({ url:"example.com/test.css", type : "GET", crossDomain ...

jquerycssajax

Is there a way to sort a table using a dropdown menu selection as a filter?

I am currently working on a project that involves a table with three columns, which are typically populated from a SQL database. My goal is to filter the third column based on the value selected from a dropdown menu. I came across a helpful tutorial on W3 ...

javascripthtml

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...

htmlcss

Tips for aligning three <p> elements side by side using flexbox

I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1. Below is the code I have been us ...

htmlcss

Code snippet for replacing text enclosed between two tags using regex in PHP programming language

While I am not an expert in regex, I am attempting to develop a code inspired by examples I have come across. My goal is to replace instances of the string <li> with <li class="ingredient"> within a WordPress table. However, this replacement mu ...

phphtmlregexwordpressreplace

Converting HTML divs into a single page PDF document using DinkToPdf

Having trouble generating PDF from HTML using DinkToPdf due to div elements splitting across pages? Is there a way to ensure the entire div stays on one page, perhaps through html/css? Ideally, if there is sufficient space, the div should remain on the c ...

htmlcss.netpdfdinktopdf

The navigation bar vanishes when a picture is inserted below it

I encountered an unusual issue on my webpage. Everything was going smoothly with my navigation bar, even for mobile phones. However, as soon as I added a photo below the navigation bar, it disappeared... I'd like to keep the navigation bar visible, ...

htmlcssbackground-imagenavigationbarjquery-mobile-navbar

Troubleshooting padding problem in mobile gallery view with Bootstrap

Having a problem with the gallery layout in Bootstrap. It looks great on desktop view, but on mobile, there's no space between images on the same row. On mobile, the images stack vertically without any spacing between them within a row. However, ther ...

htmlcssmobile

The hover drop-down menu in CSS is not appearing in the correct position

Having trouble with my navigation bar - the dropdown menu isn't showing up below the category when I hover over it. It keeps ending up in the left-hand corner and I can't access it! I've searched everywhere for a solution, but can't fin ...

htmlcssnavbarnav

Conceal the Floating Panel when printing dialog box is open

I'm working on a floating panel that needs to be completely hidden when printing. I am using JSPanel3. I want the entire panel to only be hidden during the print display. HTML Code <div style="position: absolute; top: 30px; left: 20px" id="indxPo ...

angularjshtml

Implementing a Standardized Template for Consistent Design and styling Throughout Website

As I work on building my website, I find myself struggling with some of the intricacies. The homepage is set up with a navbar and header, along with several pages that can be easily navigated to. While everything seems to be functioning properly, upon ins ...

javascripthtmlcss

Tips for making a div expand to take up the available space on the left side of a taller div

Could you take a look at the scenario below? I'm attempting to position my yellow div beneath the red div and on the left side of the lower part of the green div. When I apply clear: left, it moves down but leaves empty space above it. Is there a way ...

htmlcsspositioningfloating

Text not aligned with Line Height

I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach. Below is the code I hav ...

csshtml

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

Connected Date Selector

I am new to using Bootstrap and attempting to implement a linked datepicker with the following requirements: Display only the date (not the time). The default selected date on page load should be today's date for both the Datepicker and the text ...

javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker