具有静态和响应宽度的两列模板 [英] Two column template with static and responsive width

问题描述

有时我们需要将百分比和固定值结合起来进行尺寸计算，尤其是在创建一些响应式布局时。就我而言，我发现只有两种方法可以在纯CSS中达到预期效果。

问题

让我们快速看一下这个问题 - 我们需要创建一个双列布局，并将其拉伸到页面的整个宽度，其中一列的宽度为常量。

 < section> 
<文章>我填写所有可用空间！< / article> 
< aside>我是50px宽度！< / aside> 
< / section> 
  

解决方案1 ​​ - 利用calc（）函数

示例：
FIDDLE
$ b

calc（）函数使我们可以将百分比和固定值相结合，例如：

  article {
 width：calc（100％ -  50px）; 
} 
  

不幸的是，这不是跨浏览器的解决方案（ http://caniuse.com/#search=calc ）
，建议使用回退（ http://html5please.com/#calc ）。

解决方案2 - 跨浏览器的固定布局表格

示例： FIDDLE

默认表中每列的宽度是自动计算的并取决于细胞的内容。为了解决问题，我们需要强制列的大小，所以另一个解决方案使用具有 table-layout 属性设置为 fixed 。它使我们能够设置任何列的宽度。我已经修改了HTML结构，但也可以通过使用 display 属性（丑陋的示例： $ b

小结

在响应式世界中这是一个非常常见的问题，我很好奇如果有任何其他想法如何在纯CSS和HTML中解决它。任何想法都将不胜感激。

问候。

编辑

谢谢大家的贡献！

我同意我展示的问题太简单了:)

您可以找到关于这个问题的进一步讨论 here

a>。

解决方案

我的2¢和三种方法：

jsBin演示（另存） & jsBin演示（Aside right）

  article {
 margin-right：150px; 
} 
在旁{
 width：150px; 
位置：绝对; 
 right：0;顶部：0; 
} 
  

甚至有一种完全平庸的解决方案即可。您可以使用这个简单的技巧：

jsBin demo 并将 body 作为文章。

  body，html {
 height：100％; 
} 
在外{
 float：left; 
最低身高：100％; 
 width：150px; 
 
 $ / code> 





还有另一个更智能的解决方案（也适用于更多的专栏 layout）

，那就是像 table 那样做：

jsBin demo

  section {
 display：table; 
 table-layout：fixed; 
宽度：100％; 
} 
文章，除了{
 display：table-cell; 
} 
在旁{
 width：150px; 
} 
  




Sometimes we need to combine percentage and fixed values for dimension calculation especially when it comes to create some responsive layouts. As far as I'm concerned I've found only two ways to achieve the desired effect in pure CSS.

Problem

Let's have a quick look on the problem - we need to create a two column layout stretched to the entire width of page where one of the column has a constant width.

<section>
  <article>I fill out all the available space!</article>
  <aside>I'm 50px width!</aside>
</section>

Solution 1 - Making use of calc() function

Example: FIDDLE

The calc() function enables us to combine percentage and fixed values, for example:

article {
  width: calc(100% - 50px);
}

Unfortunately this is not cross browser solution (http://caniuse.com/#search=calc) and it is recommended to use fallbacks (http://html5please.com/#calc).

Solution 2 - Cross-browser fixed layout table

Example: FIDDLE

The width of each column in default table is calculated automatically and depends on the content of cells. In order to resolve the problem we need to force the size of the column, so another solution uses table that has table-layout property set to fixed. It enables us to set the width of any column. I've modified the HTML structure, but it can also be achieved by manipulating with display property... (ugly example: FIDDLE)

Summary

That's a very common problem in responsive world and I am very curious if there is any other ideas how to resolve it in pure CSS and HTML. Any thoughts on that will be appreciated.

Regards.

EDIT

Thank you all for your contribution!
I agree that the problem I shown was too simple :)
You can find a further discussion on that issue here.

解决方案

my 2¢ and Three ways to do it:

jsBin demo (Aside left) & jsBin demo (Aside right)

article {
  margin-right: 150px;
}
aside {
  width: 150px;
  position:absolute;
  right:0; top:0;
}

There's even a totally banal solution. You can use this simple trick:
jsBin demo and make body act as article.

body, html {
    height: 100%;
}
aside {
    float: left;
    min-height: 100%;
    width: 150px;
}

There's another smarter solution (applicable also to even more columns layout)
and that's doing it like table does:
jsBin demo

section {
  display: table;
  table-layout: fixed;   
  width: 100%;
}
article, aside{
  display: table-cell;
}
aside {
  width: 150px;
}

这篇关于具有静态和响应宽度的两列模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！