如何使我的CSS響應

Question

他，我爲我的應用程序的標準模板工作。我非常喜歡CSS，而且我正在努力做出一個很好的響應式設計。

現在，這是我的想法：

這是它是如何工作：

demo

現在有了一些Java腳本，我可能可以做到這一點，但如果這是可能在CSS中會很好。我的問題是我怎樣才能使我的設計只有HTML和CSS。

一個的jsfiddle剛剛脫穎而出的樂趣：

jsFiddle

我的CSS：

body{ 
    font-family:"Trebuchet MS",sans-serif; 
    padding:0px; 
    margin:0px; 
} 

#content{ 
    min-height: 100%; 
    width: 100%; 
    position: absolute; 
    background-color: #5adc23; 
} 

input[type="button"]{ 
    border:2px outset rgb(166, 166, 166); 
    display:inline-block; 
} 

input[type="button"]:hover{ 
    border:2px inset rgb(166, 166, 166); 
    display:inline-block; 
    cursor: pointer; 
} 

#mainbar{ 
    height: 31px; 
    background-color: rgb(109, 164, 227); 
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%); 
} 

    #mainbar_border{ 
     height: 100%; 
     border-bottom:1px solid rgb(0, 0, 0); 
     color: rgb(255, 255, 255); 
     font-family: 'Courier New', serif; 
     font-size: 21px; 
    } 

#mainmenu{ 
    width: 40px; 
    height: 96%; 
    min-height: 100%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 

    #mainmenu_border{ 
     height: 99%; 
     padding: 4px; 
     padding-top: 46px; 
     padding-bottom: 19px; 
     border-bottom-width: 1px; 
     border-left-width: 1px; 
     border-bottom-style: solid; 
     border-left-style: solid; 
    } 

     #mainmenu_item_container{ 
      list-style-type:none; 
     } 

#content_app{ 
    float: left; 
    width: 88%; 
    height: 96%; 
} 

    #content_app_border{ 
     height: 99%; 
     padding: 4px; 
     border-bottom-width: 1px; 
     border-left-width: 1px; 
     border-bottom-style: solid; 
     border-left-style: solid; 
     border-right-width: 1px; 
     border-right-style: solid; 
    } 

我的html：

<div id='content' class='invoer'>  
    <div id='mainbar'> 
     <div id='mainbar_border'> 
      Mainbar 
     </div> 
    </div> 
    <div id='mainmenu'> 
     <div id='mainmenu_border'> 
      <ul id='mainmenu_item_container'> 
       <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li> 
       <li>button</li> 
       <li>button</li> 
      </ul> 
     </div> 
    </div> 
    <div id='content_app'> 
     <div id='content_app_border'> 
      content 
      <br> 
       <br> 
        <br> 
     </div> 
    </div> 
</div> 

Answer 1

This JsFiddle試試吧，會給你你的圖正在尋找佈局的一個粗略的版本。從這裏您可以使用媒體查詢，如傑佛遜建議爲移動設備創建替代版本。一個技巧 - 這裏的div應該用作骨架，我不會試圖去設計它們。如果你開始添加邊框和其他一些樣式，邊緣將不再排列。這裏是CSS和HTML -

<div id="header">Header</div> 
<div id="left_nav">Left Navigation</div> 
<div id="content">Content</div> 

div { 
    position: absolute; 
} 

#header { 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 40px; 
    background: blue; 
} 

#left_nav { 
    top: 40px; 
    left: 0px; 
    width: 100px; 
    bottom: 0px; 
    background: red; 
} 

#content { 
    top: 40px; 
    left: 100px; 
    bottom: 0px; 
    right: 0px; 
    background: green; 
} 

更新：在您最後的評論之後，我對此做了更多的工作。首先，這裏是我瞭解它們的標準：

1. 左側菜單和內容應從頂部開始100px以容納標題。
2. 左邊的manu和內容應該至少延伸到頁面的底部。
3. 如果左側菜單或內容溢出超出頁面底部，則： a。它們都應該向下擴展，使它們的高度相等。 b。整個頁面應該滾動，而不是單個面板。

考慮到這一點，我無法純粹使用CSS和HTML生成所有這些效果，所以它看起來像Javascript可能需要在這裏。我已更新this JSFiddle，以便顯示#main_container的溢出。此時該解決方案完成1，2和3b。爲了實現3A我加入此javascript：

$(document).ready(function(){ 
    var body_height = $("body").height(); 
    var body_scroll = $("body").get(0).scrollHeight; 
    var menu_height = $("#left_nav").height(); 
    var content_height = $("#content").height(); 

    if(body_scroll > body_height && (menu_height != content_height)) { 
     if(menu_height > content_height) { 
      $("#content").css("height", (menu_height + "px")); 
     } else { 
      $("#left_nav").css("height", (content_height + "px")); 
     } 
    } 
}); 

這樣做只是確保#left_nav和#content是相同的高度。它確實使用JQuery，所以如果你不使用JQuery，你將不得不重寫它爲純Javascript。雖然，如果你不使用JQuery，我強烈建議你得到它here。它會讓你的生活變得更輕鬆。還要注意#spike div，它提供了在一個定位元素內添加「邊界」div的示例。

希望這會有所幫助。

Answer 2

您可以使用一個CSS框架精簡版twitter.github.io/bootstrap，foundation.zurb.com或gumbyframework.com

這樣你就不需要建立了從地面。你會從像響應腳手架，表單，表格，按鈕，菜單等

作爲一個初學者也可以在一些好聽好更容易建立，並從學習開始得到了很多造型。

Answer 3

一個讓你的設計反應靈敏簡便的方法是使用media queries。
這隻需要html和css。您可以修復自己的媒體查詢，或者使用預先製作的響應式框架。如twitter bootstrap。

媒體查詢CSS3中看看設備的能力，你可以用它們來檢查各種事情。例如：

- 寬度和高度（在瀏覽器窗口）
- 裝置的寬度和高度
- 取向 - 例如在橫向或縱向模式電話？
- 分辨率

然後，您可以根據這些功能設置您的html樣式。

Answer 4

使用像引導現有的框架可能是一個好主意，如果你不舒服做自己。你上面描述的雖然並不需要媒體查詢，因爲它實際上是一個相當基本的流體佈局。

下實現您的基本形式想要什麼

HTML：

<div id="content" class="invoer"> 
    <div id="mainbar"> 
     Mainbar 
    </div> 
    <div id="mainmenu"> 
      <ul> 
       <li>button</li> 
       <li>button</li> 
      </ul> 
    </div> 
    <div id="content_app"> 
      <br>blablabla content 
      <hr> 
      <br>blablabla content 
    </div> 
</div> 

CSS

#content { 
    background:#00E113 
} 
#mainbar { 
    width:98%; 
    height:40px; 
    background:#00ACD9; 
    color:#fff; 
    padding:1%; 
} 
#mainmenu { 
    width:100px; 
    position:absolute; 
    left:0; 
} 
#content_app { 
    margin-left:140px; 
} 

這裏我用了一個絕對定位的MainMenu，使其不影響任何周圍元素的寬度。然後在content_app上設置一個保留空間，以便爲mainmenu提供足夠的空間。

這裏 http://jsfiddle.net/PMJBc/2/