-1

I have a header div and a content div. The content div is wider than the window, so horizontal scrollbar appears, which is fine. I want the header div to occupy the full width, meaning it should stretch to the same width as the content div below it. By default divs are only wide as the window.

What is the simplest way to accomplish this? Can I do it without using JavaScript or tables? I would be fine using flex layout if that helps.

In the example below I want the red div to be the same width as the green div. Currently the red div stops at the edge of the window.

Note that in real code the content width is determined by the child elements I add to it, not set in CSS. This means I can't just set the width of the header div in CSS to match the width of the content div.

Additional clarification: When scrolling horizontally the header and content must scroll together, because header shows headings for the content below. When scrolling vertically the header stays in place (by using position sticky) while content scrolls.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .header {
        background-color: red;
        height: 50px;
      }
      .content {
        width: 10000px;
        height: 250px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="header"></div>
    <div class="content"></div>
  </body>

</html>
User52016
  • 684
  • 1
  • 8
  • 16
  • 1
    What if you include the `.header` inside the `.content` div and give it a `width: 100%;`? – Nasa May 19 '20 at 15:16
  • @Nasa that's an interesting idea. Unfortunately not a perfect solution because I need to make the header sticky and let the content scroll. So the header has to be outside the content. – User52016 May 19 '20 at 15:20
  • Divs occupy full width by default. You must have changed that manually if they are not taking up the full width. – TylerH Sep 15 '22 at 14:37

2 Answers2

1

Is this what you're after?

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 2000px;
  height: 1500px;
  background: #eee;
  position: relative;
}

.header {
  width: 100%;
  height: 50px;
  background: #ccc;
  position: sticky;
  top: 0;
}
<div class="content">
  <div class="header"></div>
</div>
Nasa
  • 317
  • 3
  • 11
  • This seems like the best solution so far. So the answer seems to be that the header must be brought inside the content in order for them to have the same width. – User52016 May 19 '20 at 15:34
0

Try this:

<head>
    <style>
      body {
        margin: 0;
      }
      .header {
        overflow-x: auto;
        background-color: red;
        height: 50px;
        white-space: nowrap;
      }
      .content {
        overflow-x: auto;
        height: 250px;
        background-color: blue;
    white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <div class="header">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Nulla aliquet enim tortor at auctor urna. Mattis vulputate enim nulla aliquet. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Tempor id eu nisl nunc mi ipsum. Adipiscing enim eu turpis egestas pretium. Sed odio morbi quis commodo odio aenean sed adipiscing. Pellentesque diam volutpat commodo sed egestas egestas. Felis imperdiet proin fermentum leo vel. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Gravida dictum fusce ut placerat orci. Blandit massa enim nec dui nunc mattis. Ut morbi tincidunt augue interdum velit euismod in pellentesque.</p>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Nulla aliquet enim tortor at auctor urna. Mattis vulputate enim nulla aliquet. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Tempor id eu nisl nunc mi ipsum. Adipiscing enim eu turpis egestas pretium. Sed odio morbi quis commodo odio aenean sed adipiscing. Pellentesque diam volutpat commodo sed egestas egestas. Felis imperdiet proin fermentum leo vel. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Gravida dictum fusce ut placerat orci. Blandit massa enim nec dui nunc mattis. Ut morbi tincidunt augue interdum velit euismod in pellentesque.</p>
    </div>
</body>

When the .content div overflows a scrollbar will be added for that div only instead of the entire body. You can do the same for .header.

Mansoor Ahmed Memon
  • 111
  • 2
  • 16
  • Unfortunately in my scenario the header and content have to scroll together when scrolling horizontally. I have added additional clarification. – User52016 May 19 '20 at 15:28
  • Will putting them both in a parent `div` and adding a scroll for the parent and setting the width of the child work for you. – Mansoor Ahmed Memon May 20 '20 at 09:29