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

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

htmlcss

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss

The clickable areas for the href and onclick functions are extremely small and positioned inaccurately on the screen

The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center o ...

htmlcss

How can I bypass hotlink protection for RSS images?

According to the definition, RSS feeds are considered public. When images are displayed within the feed, it is essentially "hotlinking," meaning that the content is being read directly from the Internet rather than your local machine. Is there a specific ...

htmlimagersshotlinking

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui

Content from PHP's unlink() function continues to persistently display

I run an Angular front end along with a PHP back end for my website. I utilize PHP's unlink function to remove specific images from Angular's assets folder: $fileToDelete = "../src/assets/images/".$name; unlink($fileToDelete) or die("Error delet ...

phphtmlangular

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

javascriptjqueryhtmlgoogle-analytics

What causes the translation of text within HTML tags to occur when attempting to retrieve it during Web Scraping?

Exploring the world of web scraping, I am currently immersed in a small project. In this snippet of code, I am capturing the HTML content and storing it in a variable named soup. source=requests.get(URL) soup=BeautifulSoup(source.text,'html.parser&apo ...

pythonhtmlweb-scrapingbeautifulsouppython-requests-html

tips for personalizing your jQuery image preview script

Currently, I have implemented a jQuery script that allows me to preview multiple images before uploading them. Although the functionality works well, I am facing difficulties customizing it to meet my specific requirements. <script> $(document).r ...

javascripthtmljquerycssbootstrap-4

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

javascriptjqueryhtml

Creating a torn paper illusion using CSS masking techniques

My goal is to create a ripped/lined paper effect using CSS mask. It's working well and looks good. However, I'm struggling to apply the mask at the top as well. Here's what I've tried so far: mask-image: linear-gradient(white, white), u ...

csscss-mask

HTML 4.01 character and character offset attributes

I'm curious about the purpose of the charoff attribute in HTML 4.01 Transitional. Specifically, consider a table column that contains the following cells: <td>1.30</td> <td>10</td> <td>100.2</td> <td>1000 ...

htmlchar

Struggling to make a basic ajax request function correctly

I've been experimenting with this code snippet in my browser's console. $.ajax({ type: 'GET', url: 'http://stackoverflow.com/', dataType: 'html', success: function() { console.log("Yes, t ...

jqueryhtmlajax

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

javascripthtmltypescriptloopsoop

A method in JQuery to replace an input with a select element is by using the replace

I have multiple input fields with pre-existing values. My goal is to replace these inputs with select dropdowns that have the same options while retaining the original values. Here is the current HTML structure: <span id="span1"> <input type=" ...

javascripthtmljquery

Is SimpleHTTPServer included in the package?

Lately, I've been experimenting with the Python SimpleHTTPServer in Mac OS X Bash instead of MAMP to assist with front-end templating. I appreciate its user-friendly nature, but I'm curious if there is a method to incorporate includes for repeate ...

pythonhtmlbashstatic

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

htmlcsstailwind-css

Focus on a specific button based on its text inside

Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...

htmlcssbutton

Tips for creating responsive Math Latex

Check out this link to my website page. Also, take a look at this other link. While using Bootstrap, I've noticed that all content is responsive except for the equations in the first link and the Matrix multiplication example in the second link towar ...

csstwitter-bootstrapresponsive-designlatex

Console output shows that the function results in undefined

When I pass a string parameter to a function, I expect the console to display "reff", but it is showing "undefined" instead. Here is the code snippet: var _ref; function foo(_ref='reff') { var bar = _ref.bar; return console.log(bar); } foo ...

javascripthtmlfunctionconsole.log