浮动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/