Question

我一直在殴打自己，试图解决这个问题。是时候放弃并询问是否有人已经有代码，他们可以让我做我正在做的事情。

enter image description here

我不希望或需要这种设计的页脚。

所有三列都需要全高。

Answer 1

我认为如果你只浮动前两列，然后将第三列的宽度设置为auto（这是默认值），它会起作用：

body {
  padding:0;
  margin:0;
}
#header {
  height:40px;
  background-color:blue;
}
#column-1 {
  width:210px;
  height:100%;
  background-color:red;
  float:left;
}
#column-2 {
  width:110px;
  height:100%;
  background-color:green;
  float:left;
}
#column-3 {
  height:100%;
  background-color:gray;
}

<div id="header"></div>
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>

Answer 2

以下是我在不使用脚本的情况下进行的操作。可能是使用javascript达到所需高度的更好选择，因为calc()没有最佳支持。

这是html：

<header></header>
<div class="leftCont"></div><!--
--><div class="centerCont"></div><!--
--><div class="rightCont"></div>

这是css：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 70px;
    background: brown;
}

.leftCont, .centerCont, .rightCont {
    display: inline-block;
    height: calc(100% - 70px);
}

.leftCont {
    width: 210px;
    background: #2b2b2b;
}

.centerCont {
    width: 110px;
    background: #4b4b4b;
}

.rightCont {
    width: calc(100% - 320px);
    background: tan;
}

最后，小提琴：Demo, remove "show" in url to view code.

jQuery解决方案：

var wH = $(window).height() - 70, // Grabs the window's height and removes 70 pixels(header height)
    wW = $(window).width() - 335; // Same deal but for the width.

$('.leftCont, .centerCont, .rightCont').css({height: wH});
$('.rightCont').css({width: wW});

小提琴：Demo

Answer 3

我提供的解决方案使用单行jQuery进行高度测量，以适应屏幕内的显示而不会产生滚动条。宽度会自动调整。

<强> HTML

<div id="header">header (full width)</div>
<div id="columns">
    <div class="column red">210 px</div>
    <div class="column green">110 px</div>
    <div class="column grey">Remaining</div>
</div>

<强> CSS

html,body,#header{
    width:100%;
    margin:0px;
    padding:0px;
}
#header{
    background-color:blue;
    height:30px;
}
#columns{
    width:100%;
}
.column{
    display:table-cell;
    height:100%;
}
.red{
    background-color:red;
    min-width:250px;
}
.green{
    background-color:green;
    min-width:110px;
}
.grey{
    background-color:grey;
    width:100%;
}

<强>的jQuery

$('.column').height($(window).height()-$('#header').outerHeight());

Fiddle /观看Fullscreen

Answer 4

简单：

<div style="background-color:blue;">HEADER</div>
<div style="background-color:red;width:210px;float:left;">WERWER</div>
<div style="background-color:green;width:110px;float:left;">cvbcvbcvb</div>
<div style="background-color:gray;margin-left:320px;">ASDASD</div>

修改

我忘记了相同的身高。您需要向<body>添加样式并为div添加一些高度，例如3000px，因此示例如下所示：

<body scroll="no" style="overflow:hidden;"> <div style="background-color:blue;">HEADER</div> <div style="background-color:red;width:210px;float:left;height:3000px;">WERWER</div> <div style="background-color:green;width:110px;float:left;height:3000px;">cvbcvbcvb</div> <div style="background-color:gray;margin-left:320px;height:3000px;">ASDASD</div> </body>

Answer 5

疑难杂症。

HTML

<div class="header">
    Header
</div>
<div class="left1">
    left1
</div>
<div class="left2">
    left2
</div>
<div class="right">
    right
</div>

的CSS

.header {height:10%; width:100%; background-color:blue;}
.left1 {height:90%; width:210px; background-color:red; float:left;}
.left2 {height:90%; width:110px; background-color:green; float:left;}
.right {height:90%; width:100%; background-color:gray; float:left;}

的jQuery

$("document").ready(function(){
    $(".right").css("width", "-=320px");
});

这应该让你走上正确的道路。希望能帮助到你。哦，然后给他们全高。那部分对你来说应该很容易。

并排3个div，带头部的全高（210x110x *）

5 个答案:

Fiddle /观看Fullscreen