浮動div右可變寬度留在div div中HTML響應式設計

Question

這一個擊敗了我，我相信我失去了一些簡單的東西。

我想要做的是有一個固定寬度的左側邊欄和右側填充可變寬度內容，將處理響應式設計。

併發症來了，因爲我希望左側邊欄的HTML來到右側div之後，這樣當分辨率下降到移動大小時，我可以刪除浮動並使內容出現在側邊欄之前，並且同時具有寬度的100％

.header { 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 
.content { 
 
    background-color: red; 
 
    height: 100px; 
 
    float: right; 
 
} 
 
.sidebar { 
 
    background: blue; 
 
    width: 240px; 
 
    height: 100px; 
 
} 
 
@media (max-width: 750px) { 
 
    .content { 
 
    float: none; 
 
    width: 100%; 
 
    } 
 
    .sidebar { 
 
    width: 100%; 
 
    } 
 
}

<div class="header">Top</div> 
 
<div class="content">Content (right on widescreen, top on less than 750px</div> 
 
<div class="sidebar">Sidebar (left on widescreen, bottom on less than 750px</div>

http://jsfiddle.net/a5LLhmo8/

Answer 1

可以與計算值使它（）。只是添加到。內容寬度：計算值（100％ - 240像素）;並且您將會使內容響應並佔據剩餘寬度。

例http://jsfiddle.net/a5LLhmo8/1/

.header { 
    width: 100%; 
    background-color: green; 
} 
.content { 
    background-color: red; 
    height: 100px; 
    float: right; 
    width: calc(100% - 240px); 
} 
.sidebar { 
    background: blue; 
    width: 240px; 
    height: 100px; 
} 
@media (max-width: 750px) { 
    .content { 
     float: none; 
     width: 100%; 
    } 
    .sidebar { 
     width:100%; 
    } 
} 

你可以閱讀更多關於它here

Answer 2

我覺得我得到它！

請檢查：

@media (max-width: 750px) { 
.content { 
    float: none; 
    width: 100%; 
    position: relative; 
} 
.sidebar { 
    width:100%; 
    float: ; 
    position: absolute; 
    bottom: 0; 
} 

請檢查鏈接，看看這是你在找什麼：

http://jsfiddle.net/a5LLhmo8/2/

我希望這有助於。

Answer 3

您還可以使用flexbox設計使頁面在不使用媒體查詢的情況下響應，並且可以提供很大的靈活性。

HTML：

<div class="header">Top</div> 
<div class="container"> 
    <div class="sidebar">Sidebar</div> 
    <div class="content">Content</div> 
</div> 

CSS：

.header { 
    width: 100%; 
    background-color: green; 
} 
.container { 
    display: flex; 
    flex-wrap: wrap-reverse; 
} 
.content { 
    width: 300px; /* Specify minimum content width */ 
    background-color: red; 
    height: 100px; 
    flex-grow: 1; 
} 
.sidebar { 
    background: blue; 
    width: 240px; 
    height: 100px; 
} 

下面是關於Flexbox的設計的一些信息。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/