Panes designed with a vertical header that remains fixed while scrolling

I've encountered a challenge in HTML/CSS with my desired setup. I am looking for:

  • A header panel that remains fixed at the top of the page, stretching to fill the available width while also having a minimum width;
  • A content section that can be scrolled vertically and shares the same minimum width as the header;
  • If the minimum width exceeds the width of the browser window, a horizontal scrollbar should appear to move both the header and content together (not independently).

This is what I have so far. What could be missing?

<html>
<head>
</head>
<body style="overflow:hidden;position:relative">
    <div id="big-container" style="overflow-y:hidden">
    <div id="header" style="position:absolute;top: 0px;left:0px;height:80px;width:100%;min-width:1000px;background-color:blue">
        Header
    </div>
    <div id="container" style="min-width:1000px;position:absolute;top: 80px;left:0px; height:100%;width:100%;padding-bottom:80px;box-sizing:border-box;overflow:hidden">
        <div id="content" style="height:100%;width:100%;overflow-y:auto;overflow-x:hidden">
            <img src="http://www.fronetics.com/wp-content/uploads/2013/12/networking.jpg" />
        </div>
    </div>
    </div>
</body>

(For clarity, I kept styles and content separate above - they are combined here only for brevity.)

htmlcss

Answer №1

Your implementation of overflow is incorrect and should be removed entirely. Instead, set your image to the width of its container and adjust other elements accordingly. Avoid using inline styles, as they are unnecessary and difficult to manage.

$(document).scroll(function(){
  
  $('#header').css('top',$(window).scrollTop());
  
});
    #header{
      position: absolute;
      top: 0;
      left: 0px;
      height: 80px;
      width: 100%;
      z-index: 999;
      min-width: 1000px;
      background-color: blue;
    }

    #container{
      min-width: 1000px;
      position: absolute;
      top: 80px;
      left: 0px;
      height: 100%;
      width: 100%;
      padding-bottom: 80px;
      box-sizing: border-box;
    }

    #content{
      height: 100%;
      width: 100%;
    }

    img{
      max-width: 100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="big-container">
        <div id="header">
            Header
        </div>
        <div id="container">
            <div id="content">
                <img src="http://www.fronetics.com/wp-content/uploads/2013/12/networking.jpg"
            </div>
        </div>
    </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

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

htmlcssnode.jsexpress

The CSS hamburger menu halves in size when being closed

I have successfully created a CSS/JS hamburger menu with a transforming icon upon clicking. However, I encountered a bug where, upon clicking the 'close' button on the hamburger, the navigation menu cuts behind the header, resulting in a messy ap ...

javascriptcss

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

htmlcssangular

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

Toggle sidebar visibility with a button click

Currently, I am working on a sidebar that can collapse and expand when a button is clicked. If you wish to take a look, I have created a JSFiddle for reference: https://jsfiddle.net/4er26xwp/1/ The challenge I am facing lies here: document.getElementsByC ...

javascripthtmlcss

Content and visual side by side

My logo and header image are giving me trouble. Whenever I attempt to center the header image, it keeps moving to the next row. How can I make sure it stays on the same row? Check out our website Thank you ...

htmlcssimagetextalignment

Exploring the possibilities of LimeJS HTML5 through the integration of various

Is it feasible to utilize various libraries such as Node.JS, JQuery, and LimeJS together without any limitations? ...

jqueryhtmlnode.jslimejs

Ways to personalize an image within a table cell using HTML

I need some advice on adjusting the size of an image that I have inserted into a cell of a table on my html page. Can someone please guide me on how to do this? Thank you! ...

phphtmlcsshtml-table

jQuery: Problems with the logic of hasClass

I'm currently troubleshooting an issue with my dropdown menu. I have come across a problem where a condition is false, but it's somehow being treated as true. To help identify the issue, please follow these steps: Click on "item 1" Click on th ...

javascriptjqueryhtml

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

javascripthtmltwitter-bootstrap

What makes styling the iconic Browse button (file input) such a challenge?

Many people are curious about how to style a file input in an HTML form, as evidenced by the plethora of well-known techniques available. However, I am more interested in understanding why we encounter such technical limitations that seem so trivial and fr ...

htmlcss

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used backgr ...

jqueryhtmlcss

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

javascripthtmlcssgoogle-chromefirefox

Investigating the Hierarchy of CSS Selectors

I've been pondering this question: What exactly is the functional distinction between these two code snippets, if any? I'm not certain how the use of a comma impacts statements. Does the #page > have an influence on the link in the first examp ...

csscss-selectors

Tips on managing an HTML date picker with the "date" type in Selenium; ensure the HTML DOM remains unchanged after selecting a date

I am currently dealing with an HTML-based date picker and while I can successfully click on it to make the calendar pop up, there doesn't seem to be an option to inspect the calendar. Even when I manually select a date, there is no visible change in ...

htmlseleniumselenium-webdriverautomationui-automation

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...

javascriptjqueryhtmlinput

Executing a PHP function within the same file using AJAX: A step-by-step guide

I've been exploring online tutorials to learn about ajax as it's a new technology for me. My main goal is to understand how to utilize two functions, create() and population(), in a php file. The create() function generates a form like this: ma ...

javascriptphphtmlajax

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

cssangularangular-material

Issues arising when trying to generate HTML email content from a document

Looking to send an HTML email using Python, argparse, and the command line. I want to insert content from an HTML file directly into the email body rather than just attaching the file. So far, my attempts are only resulting in the HTML file being attache ...

pythonhtml