私はdiv要素の高さを設定するためにjQueryとアニメーションのコールを使用していたが、あなたは、例えばbelowsのは、すぐに2,3,5で遊んためのいくつかのモックアップのためだっ0
にアニメーションの速度を設定することができます。 ..ブロックデザイン。 Jqueryのアニメーションコールは、メインコンテンツ、サイドバーなどのdivの高さを設定するために使用されますが、これはあなたの要件のためには少し上にあるかもしれません。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mock_2_ColGoldenRatio.aspx.cs" Inherits="ia._HtmlMocks.Mock_2_ColGoldenRatio" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css" >
/*normalise*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
font-size:100%;
font-style:normal ;
font-weight:normal;
border-collapse:collapse ;
border-spacing:0;
border:0;
border-width: 0px ;
text-align:left;
}
q:before,q:after
{
content:'';
}
/*center everything using html container*/
html{
text-align: center ;
}
/* wash with olive ; make body width max 976 px ; no margin ; relative position so other elements within */
body
{
background-color:Olive;
width:976px;
margin:0 auto ;
text-align: left ;
position: relative ;
}
#HeaderEnc
{
background-color : Maroon ;
}
#SearchEnc{
background-color: red ;
border-width: 0px ;
}
#MainBlogNav{
background-color:Yellow ;
}
/* postion relative to normal flow */
#ContentEnc{
background-color: Teal ;
position: relative ;
}
#ContentSideBarA
{
position: absolute ;
background-color: #AAA ;
left: 62% ;
width: 38% ;
}
#ContentMainEnc{
position: absolute ;
background-color: #888;
left: 0% ;
width: 62% ;
}
#ContentSideBarB{
position:absolute ;
background-color : #AAA ;
left: 0% ;
width: 0px ;
}
#FooterEnc{
position: absolute ;
background-color: blue ;
left: 0 ;
width: 100% ;
}
</style>
</head>
<body>
<div id="HeaderEnc">
The quick brown fo jumped over the lazy dog.
<br />
HeaderEnc
<div id="SearchEnc">SearchEnc</div>
<div id="MainBlogNav">MainBlogNav</div>
</div>
<div id="ContentEnc">
<div id="ContentMainEnc"><i>ContentMainEnc</i> :
<% Response.Write(GetContentBig()) ; %>
</div>
<div id="ContentSideBarA"><i>ContentSideBarA</i>
<% Response.Write(GetContentSmall()) ; %>
</div>
<div id="ContentSideBarB"><i>ContentSideBarB</i>
<% /*Response.Write(GetContentMedium()) ;*/ %>
</div>
<i>ContentEnc-Start</i>
<br />
<br />
<br />
<br />
<i>ContentEnc-Start</i>
</div>
<div id="FooterEnc" >FooterEnc</div>
</body>
</html>
<script src="../../Scripts/jquery-1.3/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/dimensions_1.2/jquery.dimensions.js" type="text/javascript" ></script>
<!--<script src="../../Scripts/Common/IaCommon.js" type="text/javascript" ></script>-->
<script type="text/javascript" >
/*
* ia.common 0.1.0
*
*/
var ia = {}
ia: "0.1.0";
// gets max settings from set of elements
var getBoundaries = function(elements) {
var maxHeight = 0;
var maxTop = 0;
var itemSelector = '';
var itemHeight = 0;
var itemPosition = {};
var itemTop = 0;
for (i = 0; i < elements.length; i++) {
itemSelector = elements[i]
itemHeight = $(itemSelector).height();
itemPosition = $(itemSelector).position();
itemTop = itemPosition.top;
maxHeight = itemHeight > maxHeight ? itemHeight : maxHeight;
maxTop = itemTop > maxTop ? itemTop : maxTop;
}
return { 'maxHeight': maxHeight, 'maxTop': maxTop };
}
// Rets truthy ; used by property get/set public fns
var SetIfOk = function(val) { return val; }
// IaPage class
var IaPage = function(objSpec) {
// override default page object with defaults from caller
var that = $.extend({
'speedFooterAnimate': 3000
, 'speedContentAnimate': 1000
}, objSpec || {});
// fn to move footer, ... to correct position : inmann clearing
that.arrangePageStructure = function() {
boundaries = getBoundaries(this.ContentElements);
$(this.FooterEncSelector[0]).animate({ 'top': boundaries.maxTop + boundaries.maxHeight }, this.speedContentAnimate);
$(this.ContentEncSelector[0]).animate({ 'height': boundaries.maxHeight }, this.speedFooterAnimate);
};
// Ret
return that;
}
var iaPage = IaPage(
{
'ContentEncSelector': ['#ContentEnc']
, 'FooterEncSelector': ['#FooterEnc']
, 'ContentElements': ['#ContentEnc', '#ContentSideBarA', '#ContentMainEnc', '#ContentSideBarB']
}
);
$(function() {
iaPage.arrangePageStructure();
}
);
</script>
いいです。 Works on IE6 + FF –
テーブルが使用されているため、 "間違ったやり方"が行われているということは馬鹿馬鹿しいことです。私が表形式のデータを表示した場合、セルの高さ全体に伸ばしたい高さの要素を含む各行にセルを入れたいのですが？ – Jez
@Jez質問は、すでに表を使用しているレイアウトについてですが、表形式のデータを表示することではありません。私はまた、実際にはそれを行う最善の方法ではないので、 "右"を空引用しました。 – garrow