解列高度自適應(相同)的五種方法_經驗交流
- WBOY原創
- 2016-05-16 12:09:112064瀏覽
これは最も広く使用されている方法で、ハックは不要です。推奨:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
body{
パディング: 0;
マージン: 0; フォントサイズ: 12px;
行の高さ: 140%; E7DFD3; }
幅: 580px;
背景:#FFFFFF;
#header,#footer{
背景: #E8E8E8;
text-align:center;#sideleft{
浮動小数点: 左;
#sideright{
> 位置:相対;
マージン: 0 -170px 0 0;
背景: #F0F0F0;#footer{ } h1,h2,address,p{ マージン: 0;
パディング: .8em>}h1,h2{font-size: 20px;}
頭
sideleft
デフォルトの長さ
長いページ
固定されたピクセルベースの設計アプローチから、柔軟で相対的な設計アプローチに移行するのは簡単ではありません。しかし、正しく使用すれば、デザインを犠牲にすることなくアクセシビリティと使いやすさを向上させるための自然な選択となる可能性があります。
ピクセルはコンピューター画面上の拡大縮小できない点であり、
h3 はワード サイズの正方形です。フォント サイズの変更により、h3
ウェブサイトを特定の方法で表示したいと考えているかもしれませんが、ユーザーが見たいものは異なる可能性があります。ユーザーに何かを強制すると使いやすさが損なわれ、サイトの成功に悪影響を及ぼします。
固定されたピクセルベースの設計アプローチから、柔軟で相対的な設計アプローチに移行するのは簡単ではありません。しかし、正しく使用すれば、デザインを犠牲にすることなくアクセシビリティと使いやすさを向上させるための自然な選択となる可能性があります。
sideright
<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
2.采用脚本控制列的高度（一）
需要事先知道哪列的高度，以此为基准用脚本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"
上面的代码是以sideright的基准高度来控制sideleft的高度。
代码简单，但比较被动：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head
sideleft
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
sideright
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
<script> <BR>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" <BR></script>
<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
3.采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判断。
代码较复杂，有点延时：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script></script>
脚本控制三行三列自适应高度DIV布局
親和力指的並不只是關於盲人和螢幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
親和力指的並不只是關於盲人和螢幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
親和力指的並不只是關於盲人和螢幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
如果設計者使用像素為單位指定文字大小，大多數的使用者將無法縮放文字，因為 Internet Explorer 改變文字大小的方式與別的瀏覽器不同。 Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows 下的IE卻不能。
親和力指的並不只是關於盲人和螢幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
如果設計者使用像素為單位指定文字大小，大多數的使用者將無法縮放文字，因為 Internet Explorer 改變文字大小的方式與別的瀏覽器不同。 Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows 下的IE卻不能。
親和力指的並不只是關於盲人和螢幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。
使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。
僅供示範網頁陶吧
<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks比较多（主要是opera的），但容易使用，推荐：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head
sideleft
要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的自然選擇，同時又無須做出設計上的犧牲。
像素是電腦螢幕上的不可縮放的點，而一個
h3 就是一個字大小的方塊。由於字體大小的變化， h3
代表使用者喜歡的文字大小的相對單位。
採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。
也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。
要從固定的、基於像素的設計方法轉到彈性的、相對的設計方法並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的自然選擇，同時又無須做出設計上的犧牲。
像素是電腦螢幕上的不可縮放的點，而一個
h3 就是一個字大小的方塊。由於字體大小的變化， h3
代表使用者喜歡的文字大小的相對單位。
採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。
也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。
sideright
🎜>
並不容易。但是如果恰當利用，就可以成為增強親和力和易用性的自然選擇，同時又無須做出設計上的犧牲。
像素是電腦螢幕上的不可縮放的點，而一個
代表使用者喜歡的文字大小的相對單位。
採用印刷式的固定設計方案或許要容易些，因為如果尺寸不變，則考慮的東西就相對較少。可是如果採用彈性的設計方法，就可以充分利用電腦的顯示器和瀏覽器。
也許你想你的網站以某種特定的方式顯示，但是你的使用者想看到的可能不一樣。任何強加於使用者的東西都不利於易用性，從而對網站的成功造成損害。
Footer
🎜>
<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>
5.采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。
三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。
CSS代码：
#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}
xhtml代码：
从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。
优点：不需要背景图片，无hacks，完全的自适应高度。
缺点：现在的代码只能左对齐。
演示：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head
sideleft
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
sideright
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。
<script> <BR>var now = new Date(); <BR>document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' style="max-width:90%">"); <BR></script>