分享一下最近遇到的小問題

edited 十月 2013 in Javascript
最近有一個需求,就是希望B div的高度能夠隨著A div的高度變化
就用了下面的方式:
======================原始碼===============================
<script type="text/javascript">
window.onload = function(){
var id_main_info = document.getElementById("id_main_info").offsetHeight;
window.document.getElementById("id_image_bg_repet").style.height = id_main_info;
alert(window.document.getElementById("id_image_bg_repet").style.height+'/'+id_main_info);
}

</script>

</head>
<body>

<div id="id_main_info">
nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>

NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>nmnmnmnm<br>
NKNKNKN<br>

<br>
<br>
</div>
<div id="xxx">
<div id="id_image_bg_repet" style="height:auto">dfsdfsdfdsfdsfssfdsfdfsdf</div>
</div>
<div id="xxx">
dfsdfsdfdsfdsfssfdsfdfsdf
</div>
</body>
=====================================================
結果只有IE有效果,chrome就很怪了,單純以上的原始碼是有效果的,
但是如果將上述做法綜合運用在其他網頁裡面,就會出現定義不到高度的狀況
最後搞了半天才知道,最好是在後面加上 +"px"
window.document.getElementById("id_image_bg_repet").style.height = id_main_info + "px";

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=5703

評論

  • edited 一月 2011
    我感覺這個需求只要單純的 css 就可以做了說 哈
  • edited 一月 2011
    不過這個例子看不出要等高的原始需求是什麼
    沒有float的問題很少會需要這樣做
  • edited 一月 2011
    對啊 看不出
    容我猜測 , 你是要讓圖片當背景 , 自動調整寬高嘛 ?
  • edited 一月 2011
  • edited 一月 2011
    拍謝...沒有詳細說明,應為我當時只是為了解決chrome無法定義style.height的問題
    上面那個範例確實看不出來我的用途...不過pigo大猜對了,抱歉~只顧著傳達 +"px" 可以解決,沒有好好說明用途
    我有兩個DIV是要重疊在一起的,上面層的DIV載入動態資料(文字),下面層載入圖片,
    所以我需要偵測上面層的DIV載入文字內容後被撐得多高~下面層就要展開多高~
    當然實際運用不可能真的會相等,背景DIV的高度會扣掉一些或加一些~
  • edited 一月 2011
    這純 css 的
    不知道是不是你要的效果
    會跟著 DIV 大小自動縮放
  • edited 一月 2011
    喔~感謝pigo大提供的範例~

    我的需求有點不一樣,我也提供我的,
    範例簡化了許多內容但是目的不變~
  • edited 一月 2011
    我看了你的範例了
    我覺得不需要用到 javascript 吧
    如果再包一層 DIV 將 id_main_info 及 id_image_bg_repet 包起來
    應該就可以如我的方法做出效果了
  • edited 一月 2011
    不過再仔細思考一下
    你的背景如果都是單一顏色 , 那根本也不用搞到那麼麻煩
    除非你的背景是像我範例那樣
  • edited 一月 2011
    嗯單色..這樣不行嗎..?
    <html>
    <head>
    <style type="text/css">
    BODY{text-align: center;}
    DIV{width: auto;overflow: hidden;display: block;}
    .line{
    	position:relative;
    	margin: 0 auto;
    	width: 1000px;
    	}
    #id_menu{
    	position:absolute;
    	border-bottom:#000 dotted 1px;
    	margin: 20px 10px 0 10px;
    	width:210px;
            left: 0px;
    }
    
    #id_main_info{
    	margin: 20px 20px 20px 345px;
    	width:500px;
    }
    
    #container{
    	background-image:url(temp.jpg);
    	background-repeat:repeat-y;
    	padding-bottom: 60px;
    }
    </style>
    </head>
    <body>
    <div class="line">BANNER</div> 
    <div id="container" class="line">
    	<div id="id_menu">
        MENU01
        </div>
    	<div id="id_main_info">
    內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
        </div>
    </div>
    <div id="footer" class="line">COPYRIGHT</div>
    </body>
    </html>
    
  • edited 一月 2011
    我的背景不是單色啦...是有花紋的可以連續拼接的那種
    為什麼我會需要這樣子搞,實際上我的背景不單純,是很多塊圖案拼接的,
    然而只有中間一段可以做連續背景...so想了這樣的方法
  • edited 一月 2011
    我不知道你整體網頁會變成怎樣
    我總覺得有法可解
    以下是依照你目前畫面解出來的 , 我只有 IE8 ... 所以 IE8 / Chrome/ FireFox 都可以正常看
    但若真正要搭配你的整體畫面 恐怕還要大改一番
  • edited 一月 2011
    我覺得一樣阿...
    整個區域一塊DIV
    3切div
    menu飛
    main上下衝(margin top -npx,bottom -npx)
    應該就可以了
    但是如果你中間的背景有px上的限制...那就只好用js演算了(攤手
  • edited 一月 2011
    @...pigo和SoltyRain的正在研究
    我實際的狀況是內容的開頭和要重複的背景不是一起的,
    當內容長度超過原本的漸層背景,
    才需要利用可連續的背景延伸....(我快要不知道我在說啥了^^|||總之請看範我這次的版本...
    *其實只是個小問題...真不好意思動用兩位寶貴的時間...orz
  • edited 一月 2011
    pigo我不知道~
    我只是吃飽太閒~~過年嘛 =.=
    P.S這還真是娘味十足阿 XD
  • edited 一月 2011
    是的~我平常就是在做這些東西...orz...我也很想做那種科技感的網頁啊..阿就碰不到^^|||...
  • edited 一月 2011
    我是真的吃很飽,天氣冷

    我看了一下 shing 最終的樣式呈現
    如果是我 , 我會把漸層的部分做一個 height 很長的(如 10000px 應該夠了吧) , 然後去 repeat x 就好了 , 這個背景圖也不會佔用太大的檔案長度
    至於最下面的 footer , 就另外再做一個背景就好了
    這樣 HTML Code 看起來也會比較清爽
  • edited 一月 2011
    聰明反被聰明誤...對,repet還有x可以用...
    其實也是要看底圖的紋路樣式適合不適合就是了~
    不過也好啦,誤打誤撞學了一些東西,過完年又可以招搖撞騙一陣子XD
    真的很感謝^^
  • edited 一月 2011
    聰明反被聰明誤 ~ 這話有褒也有貶耶 哈哈
    我想起了一個問題比較頭痛
    如果原本的內容比較短 ! 而根本還不需要顯示第三張圖時 , 這樣和最下面的圖串接就會很突兀
    不知道你有沒有思考過這問題
  • edited 一月 2011
    研究了一下..應該無解~如果用區域衝出法背景會被吃掉,往下衝沒問題,往上衝就包了..重要的是IE又給我破‧碎‧虛‧空
    還是JS吧 XD
Sign In or Register to comment.