Page Widget How to - Make right content scroll and left menu bar stay

Question

We would like to know how to make right content scroll and left menu bar stay.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.page-wrap {<!-- w  w  w  . j  a  v a2s  .c  o  m-->
  height: 100%;
  width: 100%;
  float: left;
  margin-left: -400px;
}

.page-wrap .page {
  height: 100%;
  margin-left: 400px;
  overflow-y: scroll;
  background: #eee;
}

.side-wrap {
  height: 100%;
  width: 400px;
  float: left;
}

.side-wrap .side {
  height: 100%;
  background: #cccccc;
}

.side-wrap .side .side-menu {
  width: 340px;
  margin: 0 auto;
  padding-top: 20px;
}

.side-wrap .side .side-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #f9f9f9;
}

.side-wrap .side .side-menu ul li a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.side-wrap .side .side-menu ul li a span {
  float: right;
}

.side-wrap .side .side-menu ul li.active {
  background: #ffffff;
}
</style>
</head>
<body>
  <div class="side-wrap">
    <div class="side">
      <div class="side-menu">
        <ul>
          <li class="brand"><a href="#">ProbabilityWolf</a></li>
          <li class="active"><a href="#">Home<span>&raquo;</span></a></li>
          <li><a href="#">About<span>&raquo;</span></a></li>
          <li><a href="#">Contact<span>&raquo;</span></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="page-wrap">
    <div class="page">
      <h1>HTML Ipsum Presents</h1>
      <p>
        <strong>Pellentesque habitant morbi tristique</strong> senectus et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        <code>commodo vitae</code>
        , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
        dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut
        felis.
      </p>
      <p>
        <strong>Pellentesque habitant morbi tristique</strong> senectus et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        <code>commodo vitae</code>
        , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
        dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut
        felis.
      </p>
      <p>
        <strong>Pellentesque habitant morbi tristique</strong> senectus et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>netus <br/>
        <code>commodo vitae</code>
        , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
        condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
        dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut
        felis.
      </p>
    </div>
  </div>
</body>
</html>
The code above is rendered as follows: