這個頁面header部分是100%的寬度，60px的高度，左側是剛好一屏的高度，180的寬度，右側的部分把剩余的空間占滿，剛開始的時候還沒怎么接觸這樣的頁面，以為使用js讀取瀏覽的可視化寬高，然后在做計算，但是因為后面做的頁面需要自適應屏幕的大小而發生變化，於是我用了jquery中的$(window).resize()方法，當屏幕出現各種各樣的大小或者以各種方式打開瀏覽器的時候會出現很多問題，很多時候當屏幕很小的打開頁面的時候，頁面是亂的，刷新一次之后，才恢復正常。后來我發現這種方式實不可取的，這樣的頁面最好不要用js來計算，后面找啊找，我發現了一個css3中的屬性，可以用calc()來計算一些寬高之類的，但是這個屬性在低版本的IE下面是不被支持的，最后經過研究之后，可以通過定位來實現這樣的頁面。下面附上代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
background: #ddd;
z-index: 100;
}
.content{
position: relative;
width: 100%;
height: 100%;
left: 0;
overflow: hidden;
}
.cnt-lf{
position: absolute;
width: 180px;
height: 100%;
top: 60px;
left: 0;
background: orange;
}
.cnt-rg{
min-width: 900px;
padding-top: 60px;
padding-left: 200px;
}
.cnt-box{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="cnt-lf">
<div class="tp" style="width: 100%;height: 50%;background: red;"></div>
<div class="tp" style="width: 100%;height: 50%;background: black;"></div>
</div>
<div class="cnt-box">
<div class="cnt-rg">5154512112545445112454545
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
的撒旦法師法師法 暗示法師法師是是是是是是是是是是是是是是是是
</div>
</div>
</div>
</body>
</html>