użyłem jQuery i połączenia animate, aby ustawić wysokość div, ale można ustawić prędkość animate 0.
Ten przykład belows był dla niektórych makiety do szybko zabawy z 2,3,5. .. projekty bloków. Wywołanie anime Jquery służy do określania wysokości elementów div dla głównej zawartości, paska bocznego itp., Ale może to być trochę wyższe niż wymagane.
<%@ 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>
Niezły. Działa na IE6 + FF –
Założenie, że ponieważ tabela jest używana, rzeczy robione są "w niewłaściwy sposób", jest idiotyczne. Co się stanie, jeśli będę wyświetlał dane tabelaryczne i chcę mieć komórkę w każdym wierszu zawierającą element, którego wysokość chcę rozciągnąć do pełnej wysokości komórki? – Jez
@Jez pytanie dotyczy układu, który już używa tabel, a nie wyświetlania danych tabelarycznych. Powiedziałem też "dobrze", ponieważ czasami nie jest to najlepszy sposób na zrobienie tego. – garrow