Search code examples
htmlcss

How to acheive scrollable content in multiple divs

I want to make a layout that looks like this:

enter image description here

The layout consists of three fields:

  1. A header at the top with a fixed height, dynamic width, and vertically scrollable content.

  2. Body below header, with dynamic width and height, with vertically scrollable content.

  3. A sidebar to the right, with a fixed width, dynamic height, and no scroll. (This should remain fixed when you scroll the body content)

Dynamic height and/or width means it will resize with the window, not that it resizes with content.

Here's one of my (very failed) attempts: http://jsfiddle.net/uYTht/34/

HTML structure:

#header {
  width: 100%;
  height: 100px;
  margin-right: 150px;
  background-color: green;
  overflow-y: scroll;
}

#content {
  background-color: blue;
  height: 100%;
  overflow-y: scroll;
}

#sidebar {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -150px;
  width: 150px;
  height: 100%;
  float: right;
  background-color: red;
  overflow: hidden;
}
<div id="header">
  header content
</div>
<div id="content">
  body content
</div>
<div id="sidebar">
  sidebar content
</div>

Solution

  • I created a simple fiddle, that doesn't use calc (support isn't great - http://caniuse.com/calc, and then there's the big unknown of any performance penalty you may/may not hit using it..)

    It's very straight forward, using simple CSS.

    http://jsfiddle.net/ruYGH/3/

    html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#header,
#content {
  left: 0;
  overflow-y: scroll;
  position: absolute;
  right: 200px;
  top: 0;
}

#header {
  background-color: red;
  height: 100px;
}

#content {
  background-color: white;
  bottom: 0;
  top: 100px;
}

#sidebar {
  background-color: blue;
  bottom: 0;
  color: white;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}
    <div id="header">
  <!-- Courtesy of cheese ipsum -->
    I love cheese, especially cheeseburger monterey jack. Roquefort taleggio cut the cheese when the cheese comes out everybody's happy parmesan cheesy feet squirty cheese st. agur blue cheese. Hard cheese roquefort goat parmesan caerphilly ricotta feta swiss. Cheese strings red leicester manchego red leicester stinking bishop boursin manchego ricotta. Port-salut fondue cheese strings boursin babybel gouda cow when the cheese comes out everybody's happy. Chalk and cheese ricotta queso fromage roquefort cheeseburger cow emmental. Hard cheese goat cheddar cheesecake paneer caerphilly gouda cheese and biscuits. Cheesecake taleggio lancashire when the cheese comes out everybody's happy caerphilly cheeseburger croque monsieur cheeseburger. Manchego goat edam croque monsieur stilton manchego taleggio jarlsberg. Fondue croque monsieur chalk and cheese bocconcini swiss who moved my cheese.

Fondue fromage frais dolcelatte. Boursin danish fontina cheese and wine airedale ricotta who moved my cheese rubber cheese who moved my cheese. Dolcelatte cheesecake stilton cheese triangles cheddar parmesan mascarpone cheeseburger. Rubber cheese say cheese everyone loves cut the cheese goat who moved my cheese cow cream cheese. Everyone loves brie fondue who moved my cheese cheddar croque monsieur airedale mascarpone. Mascarpone pepper jack camembert de normandie croque monsieur mascarpone mascarpone halloumi mascarpone. Cheesy feet who moved my cheese dolcelatte cheese triangles cottage cheese danish fontina cheeseburger caerphilly. Mozzarella taleggio cheesy grin boursin monterey jack smelly cheese stilton camembert de normandie. Babybel fromage parmesan danish fontina cream cheese monterey jack pecorino cauliflower cheese. Babybel stinking bishop cheesecake emmental.

Squirty cheese cream cheese cheese slices. Ricotta dolcelatte boursin ricotta cheeseburger dolcelatte croque monsieur st. agur blue cheese. Cream cheese everyone loves emmental danish fontina jarlsberg jarlsberg stinking bishop cheddar. Cheesy feet stilton ricotta the big cheese cheese on toast camembert de normandie monterey jack cheesecake. Rubber cheese brie swiss edam cheeseburger monterey jack cheese triangles swiss. Cheese strings emmental queso cheese and wine cheddar bocconcini cheese slices jarlsberg. Queso st. agur blue cheese cheese slices boursin edam pecorino goat mozzarella. Taleggio who moved my cheese ricotta brie fondue cauliflower cheese cream cheese blue castello. Babybel who moved my cheese caerphilly pecorino when the cheese comes out everybody's happy roquefort st. agur blue cheese macaroni cheese. Cheesecake brie cream cheese stilton swiss roquefort cheese triangles cheddar. Blue castello cheese triangles pecorino camembert de normandie swiss.

Stinking bishop boursin roquefort. Smelly cheese squirty cheese gouda cheesecake airedale goat squirty cheese the big cheese. Say cheese stilton pecorino cut the cheese cheesy grin everyone loves stilton cheesy feet. Fondue bavarian bergkase cauliflower cheese smelly cheese caerphilly bocconcini who moved my cheese cheese and wine. St. agur blue cheese lancashire jarlsberg fromage say cheese fromage caerphilly cheese on toast. Swiss croque monsieur monterey jack blue castello gouda emmental fondue brie. Macaroni cheese gouda chalk and cheese red leicester lancashire who moved my cheese cheese and wine cheddar. Swiss fromage frais emmental emmental cottage cheese edam monterey jack cheeseburger. Everyone loves port-salut who moved my cheese chalk and cheese everyone loves cauliflower cheese stinking bishop airedale. Say cheese stilton cheesecake gouda st. agur blue cheese cream cheese stinking bishop ricotta. Halloumi taleggio bavarian bergkase jarlsberg cheese triangles cheesy grin.

Cut the cheese boursin gouda. Stilton cottage cheese cheesy feet boursin stilton danish fontina cheese slices macaroni cheese. Bocconcini babybel roquefort everyone loves dolcelatte emmental boursin mascarpone. Mozzarella edam rubber cheese roquefort cheese and wine monterey jack cheeseburger cheesecake. Brie roquefort cheese and wine cheese slices jarlsberg roquefort mascarpone pepper jack. Airedale manchego roquefort swiss blue castello cheeseburger fromage frais fromage frais. Pecorino who moved my cheese caerphilly cheesy grin stinking bishop bavarian bergkase cheesy feet cauliflower cheese. Fondue boursin chalk and cheese bocconcini taleggio boursin mascarpone mascarpone. Mozzarella macaroni cheese red leicester smelly cheese everyone loves stinking bishop cheese on toast cream cheese. Red leicester cow caerphilly cheddar macaroni cheese pecorino cow swiss. Cut the cheese cow cheddar camembert de normandie danish fontina stilton say cheese.
</div>
<div id="content">
    <!-- Courtesy of cheese ipsum -->
    I love cheese, especially cheeseburger monterey jack. Roquefort taleggio cut the cheese when the cheese comes out everybody's happy parmesan cheesy feet squirty cheese st. agur blue cheese. Hard cheese roquefort goat parmesan caerphilly ricotta feta swiss. Cheese strings red leicester manchego red leicester stinking bishop boursin manchego ricotta. Port-salut fondue cheese strings boursin babybel gouda cow when the cheese comes out everybody's happy. Chalk and cheese ricotta queso fromage roquefort cheeseburger cow emmental. Hard cheese goat cheddar cheesecake paneer caerphilly gouda cheese and biscuits. Cheesecake taleggio lancashire when the cheese comes out everybody's happy caerphilly cheeseburger croque monsieur cheeseburger. Manchego goat edam croque monsieur stilton manchego taleggio jarlsberg. Fondue croque monsieur chalk and cheese bocconcini swiss who moved my cheese.

Fondue fromage frais dolcelatte. Boursin danish fontina cheese and wine airedale ricotta who moved my cheese rubber cheese who moved my cheese. Dolcelatte cheesecake stilton cheese triangles cheddar parmesan mascarpone cheeseburger. Rubber cheese say cheese everyone loves cut the cheese goat who moved my cheese cow cream cheese. Everyone loves brie fondue who moved my cheese cheddar croque monsieur airedale mascarpone. Mascarpone pepper jack camembert de normandie croque monsieur mascarpone mascarpone halloumi mascarpone. Cheesy feet who moved my cheese dolcelatte cheese triangles cottage cheese danish fontina cheeseburger caerphilly. Mozzarella taleggio cheesy grin boursin monterey jack smelly cheese stilton camembert de normandie. Babybel fromage parmesan danish fontina cream cheese monterey jack pecorino cauliflower cheese. Babybel stinking bishop cheesecake emmental.

Squirty cheese cream cheese cheese slices. Ricotta dolcelatte boursin ricotta cheeseburger dolcelatte croque monsieur st. agur blue cheese. Cream cheese everyone loves emmental danish fontina jarlsberg jarlsberg stinking bishop cheddar. Cheesy feet stilton ricotta the big cheese cheese on toast camembert de normandie monterey jack cheesecake. Rubber cheese brie swiss edam cheeseburger monterey jack cheese triangles swiss. Cheese strings emmental queso cheese and wine cheddar bocconcini cheese slices jarlsberg. Queso st. agur blue cheese cheese slices boursin edam pecorino goat mozzarella. Taleggio who moved my cheese ricotta brie fondue cauliflower cheese cream cheese blue castello. Babybel who moved my cheese caerphilly pecorino when the cheese comes out everybody's happy roquefort st. agur blue cheese macaroni cheese. Cheesecake brie cream cheese stilton swiss roquefort cheese triangles cheddar. Blue castello cheese triangles pecorino camembert de normandie swiss.

Stinking bishop boursin roquefort. Smelly cheese squirty cheese gouda cheesecake airedale goat squirty cheese the big cheese. Say cheese stilton pecorino cut the cheese cheesy grin everyone loves stilton cheesy feet. Fondue bavarian bergkase cauliflower cheese smelly cheese caerphilly bocconcini who moved my cheese cheese and wine. St. agur blue cheese lancashire jarlsberg fromage say cheese fromage caerphilly cheese on toast. Swiss croque monsieur monterey jack blue castello gouda emmental fondue brie. Macaroni cheese gouda chalk and cheese red leicester lancashire who moved my cheese cheese and wine cheddar. Swiss fromage frais emmental emmental cottage cheese edam monterey jack cheeseburger. Everyone loves port-salut who moved my cheese chalk and cheese everyone loves cauliflower cheese stinking bishop airedale. Say cheese stilton cheesecake gouda st. agur blue cheese cream cheese stinking bishop ricotta. Halloumi taleggio bavarian bergkase jarlsberg cheese triangles cheesy grin.

Cut the cheese boursin gouda. Stilton cottage cheese cheesy feet boursin stilton danish fontina cheese slices macaroni cheese. Bocconcini babybel roquefort everyone loves dolcelatte emmental boursin mascarpone. Mozzarella edam rubber cheese roquefort cheese and wine monterey jack cheeseburger cheesecake. Brie roquefort cheese and wine cheese slices jarlsberg roquefort mascarpone pepper jack. Airedale manchego roquefort swiss blue castello cheeseburger fromage frais fromage frais. Pecorino who moved my cheese caerphilly cheesy grin stinking bishop bavarian bergkase cheesy feet cauliflower cheese. Fondue boursin chalk and cheese bocconcini taleggio boursin mascarpone mascarpone. Mozzarella macaroni cheese red leicester smelly cheese everyone loves stinking bishop cheese on toast cream cheese. Red leicester cow caerphilly cheddar macaroni cheese pecorino cow swiss. Cut the cheese cow cheddar camembert de normandie danish fontina stilton say cheese.
</div>
<div id="sidebar">
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>    
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>

</div>