關於左邊固定，右邊自適應佈局的響應式佈局寫法

-Advertisement-

關於響應式佈局現才接觸到，雖然代碼很簡單，但是對基礎要求還是有一些。 1.left設置position:absolute和width：70px；那麼右邊用margin-left：70px；因為是響應式的我用jquery設置了一下高度（不用jquery，直接設置高度為100%好像不行，不知道為什麼有知 ...

關於響應式佈局現才接觸到，雖然代碼很簡單，但是對基礎要求還是有一些。

1.left設置position:absolute和width：70px；那麼右邊用margin-left：70px；因為是響應式的我用jquery設置了一下高度（不用jquery，直接設置高度為100%好像不行，不知道為什麼有知道的小伙伴，可以在下麵留言，有改進的也可以在下麵留言）；代碼如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
           html{ height: 100%;}
           body{ margin: 0; height: 100%;}
           .left{
               position: absolute;
               width: 88px;
               height:100%;
               background:red;
           }
           .right{
               margin-left: 88px;
               border: 1px red solid;
               background:blue;
           }
        </style>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
           $(function(){
               $(".right").css("height",$(window).height()+"px");
               $(window).resize(function(){
               $(".right").css("height",$(window).height()+"px");    
               });
           });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

2.左邊浮動，右邊overflow:auto;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
           html{ height: 100%;}
           body{ margin: 0; height: 100%;}
           .left{
               float:left;
               width: 88px;
               background:red;
           }
           .right{
               overflow: auto;
               height: 200px;
               background: blue;
           }
        </style>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
           $(function(){
               $(".right").css("height",$(window).height()+"px");
               $(window).resize(function(){
               $(".right").css("height",$(window).height()+"px");    
               });
           });
           $(function(){
               $(".left").css("height",$(window).height()+"px");
               $(window).resize(function(){
               $(".left").css("height",$(window).height()+"px");    
               });
           });
        </script>
    </head>
    <body>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

nginx.conf完整配置實例

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; ev ...
Keepalived安裝與配置

下載並解壓Keepalived安裝包到兩台nginx所在的伺服器 192.168.200.1 192.168.200.2 執行編譯安裝（安裝目錄設置為 /usr/local/keepalived ） ./configure --prefix=/usr/local/keepalived && make ...
學習盒模型的整理轉述

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ 1. css盒模型有標準盒模型和IE盒模型，結構是：content、padding、border、margin。 css3有個box-sizing屬性，設置用哪種盒模型； box-sizing:conten ...
【基礎知識】之 typeof

概述 typeof操作符返回一個字元串,指示未經計算的操作數的類型。語法常規用法 null 問題 // 在 JavaScript 最初的實現中，JavaScript 中的值是由一個表示類型的標簽和實際數據值表示的。對象的類型標簽是0。由於 null 代表的是空指針(大多數平臺下值為0x00)，因 ...
【前端】:jQuery上

前言: 今天寫一篇jQuery，發現內容太多了，那就分成兩篇寫吧……寫完jQuery基礎知識後會再寫一些jQuery實例~~ jQuery下載。jQuery是一個相容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)，對javascript進行了封 ...
Javascript學習一

JavaScript-警告（alert 消息對話框）註意: 1. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。 2. 消息對話框通常可以用於調試程式。 3. alert輸出內容，可以是字元串或變數，與document.write 相似。 // JavaScript-確認（confirm 消息 ...
JavaScript定時器及相關面試題

在 "單線程JavaScript" 這篇文章中,在介紹JavaScript單線程的同時，也介紹了setTimeout是如何工作的。但是對於定時器的一些內容，並沒有做深入的討論。這篇文章，會詳細說說JS的兩種定時器，setTimeout和setInterval，以及它們的工作方式。同時，會談談有關se ...
jQuery：deferred [轉]

jQuery的開發速度很快，幾乎每半年一個大版本，每兩個月一個小版本。每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能 deferred對象。這個功能很重要，未來將成為jQuery的核心方法，它徹底改變瞭如何在jQuery中使用ajax。為了實現 ...