none
請問div切割版面問題, 想做到像msdn文件庫的效果

    問題

  • msdn文件庫應該也是使用master page設計而成的版面吧?
    請問要如何做到左方和主要區塊有自己獨立的捲軸?
    我試過把body的overflow設成hidden, heignt和max-height設成100%,
    但是瀏覽器的捲軸仍然存在,
    並且會出現外層和主要區塊都有出現捲軸的怪異畫面. (IE7)
    (IE6當主要區塊內容太長, 會被折行位移到左方區塊下面)
    不知道是否可以提供msdn文件庫或其他類似的樣板css供參考?
    謝謝.
    2009年7月6日 下午 12:15

解答

所有回覆

  • Hi,
    目前使用的瀏覽器是IE7,
    使用VS2008寫MasterPage遇到這個問題:
    瀏覽器的長度爆掉, scroll bar的顯示和純html產生的不同.
    原本設計的是三欄式版面, 分為上方 左方 主要區塊.
    左方和主要區塊有自己的捲軸, 整個版面類似MSDN文件庫,
    先用純HTML規劃好後, 貼到MasterPage產生的版面跑掉,
    檢視原始碼, 並移掉<form>標籤後, 畫面又對了...
    可請問該如何調整?

    2009年7月7日 上午 01:36
  • Hi,

    或許您應該在css內加入

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

    2009年7月7日 上午 04:08
  • Hi,

    你要這樣切的話, 要把html、body、form等css設定為 overflow:hidden,

    並為你的div加上 overflow:scroll,

    否則就會有外層也有捲軸、內層也有的狀況出現,

    區塊內容太長會會折行往下是正常的,

    所以一定要設定的剛剛好...

    我是用一個javascript來檢查畫面的大小並且重設width, 不過問題真的還蠻多的...

    建議你可以用table來做,  可以達成一樣的效果, 又不會比較麻煩

    2009年7月7日 上午 04:45
  • Hi,
    謝謝您的協助.
    我試著包了一層table之後, 版面已經照我希望的顯示,
    但是, 我在MasterPage加入ScriptManager後, 畫面又出現類似的問題.
    檢視原始碼並移除 ScriptResource.axd 這個script tag後, 畫面又變回正常的樣子.
    請問該如何處理 ScriptManager 造成的問題呢?
    謝謝.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage0.master.cs"
        Inherits="TW_MIS.ShipNoticeFlow.UI.CommonForm.MasterPage0" %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head runat="server">
        <title></title>
        <style>
            form
            {
                margin: 0;
            }
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body style="margin: 0; padding: 0">
        
        <table width="100%" height="100%">
        <form id="form1" runat="server">
            <tr>
                <td>
                    <asp:ScriptManager ID="ScriptManagerObj" runat="server">
                    </asp:ScriptManager>
                    <div style="width: 100%; height: 20%; background-color: blue">
                        頭
                    </div>
                    <div style="width: 20%; height: 80%; float: left; overflow: auto">
                        <div>
                            <table width="2000" height="2000" style="background-color: yellow">
                                <tr valign="top">
                                    <td>
                                        長度爆炸的左邊
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div style="width: 80%; height: 80%; float: left; overflow: auto; overflow: auto">
                        <div>
                            <table width="2000" height="2000" style="background-color: pink">
                                <tr valign="top">
                                    <td>
                                        長度爆炸的中間
                                    </td>
                                </tr>
                            </table>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    
    2009年7月7日 上午 04:51
  • 您也可以參考3rd party元件:

    http://www.vwd-cms.com/examples/SplitterBar/Article1.aspx

    微軟技術支援中心(CSS) - http://www.dotblogs.com.tw/lolota/
    • 已提議為解答 James Wu 2009年7月10日 上午 03:49
    • 已標示為解答 Lolota Lee 2009年7月13日 上午 02:35
    2009年7月8日 上午 07:01