ピクセルと割合とCSSレイアウト

StackOverflow https://stackoverflow.com/questions/928160

  •  06-09-2019
  •  | 
  •  

質問

私は2つのネストされたdivを含有DIV、65個の画素（ヘッダ）の高さを指定する、1、100％（含有量）と高さを指定する、他を持っており、veritically空間の残りの部分を取ることになっています。ページがレンダリングされるときに、理由ヘッダの65個の画素から所定の高さの右側にスクロールバーがあります。

私は間違ってミキシングパーセントとピクセルを何をしているのですか？私は何かが欠けている必要があります。コンテンツセクションでは、ページ・スペースの残りの部分を使用して、私はスクロールバーを持っていないので、私はこれをどのように問題を解決できますか？

ここで私が使用していASP .NETマークアップとCSSは、次のとおりです。

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <div id="header">
        <div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div>
        <div style="float: right; height: 100%">
            <div id="outer" >
                <div id="middle">
                    <div id="inner">
                        <asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="content">
        <ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%" 
            DynamicResize="True" CssClass="junk">
            <panes>
                <ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true">
                    <Template>
                        <asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server">
                            <ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true" 
                                Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single" 
                                InitialExpandDepth="1"
                                Width="100%" BorderWidth = "0px"
                                EnableAjax ="true">
                                <AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" />
                            </ig:WebDataTree>
                        </asp:ContentPlaceHolder>
                    </Template>
                </ig:SplitterPane>
                <ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%">
                    <Template>
                        <asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/>
                    </Template>
                </ig:SplitterPane>
            </panes>
        </ig:WebSplitter>
    </div>
</div>   

html
{
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
    font-family: verdana;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-transform: none;    
    float: none;       
} 

body
{
    border: none;
    padding: 0px;
    height: 100%;
    width: 100%;
    border: none;
    margin: 0px;
}

form 
{
    border: none;
    margin: 0px; 
    padding: 0px; 
    border: none; 
    height: 100%; 
    width: 100%;
}

span.appname
{
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    font-style: normal;
    color: #FFFFFF;
    padding-right: 10px;
}

#header 
{
    background: #295984;
    width: 100%;
    height: 65px;
    overflow: hidden;
}

#content
{
    display: inline;
    width: 100%;
    height: 100%;
}

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/
#inner[id] {position: static;}
役に立ちましたか？

解決

最も簡単な解決策は、それはむしろそれ以上より、コンテンツブロック内のスペースを取るだろう...あなたのコンテンツにあなたのヘッダーを移動することです。

それができない場合は、

、問題を解決できるのさまざまなソリューションがあります。ここではいくつかのリストがあります：

1）絶対ヘッダは、コンテンツのdivの上部パディング領域をカバーすべき1のz屈折率と、コンテンツのDIVを65pxのパディングトップを与える10言うのz屈折率と、ヘッダを位置付けます。これは、ブラウザウィンドウの幅を縮小/成長任意の動的な幅を持っていない、非常に剛性設計と偉大な動作します。

2）明示的にあなたのコンテンツのdivの上、左、下、右に配置します。何の幅や高さを指定していません。この場合、上、左、下、右は、コンテンツのdivの包含ブロックの内側のパディングエッジに基づいて計算されます。繰り返しますが、これは剛性のサイトのデザインに素晴らしい作品。 IE7 / 8で動作するはずですが、IE6とそれ以前では問題になります。

3）コンテンツのdivに負の上マージンのOGの-65pxを使用してください。補うために65pxの上パディングを使用してください。これはIE7で問題となることが以前の、そして時にはFirefoxは負のマージンでグラグラ取得します。ただネットを検索し、問題を解決することができますハックがあります。これは、剛性または流体レイアウトのために働く必要があります。

ネット上のCSSデザインのための資源がたくさんあります。上記のオプションが機能しない場合は、ネット上でいくつかの検索がいくつかのリソースを起動する必要があります。

他のヒント

この記事の最初の...それはを競合絶対体位についてです読んで試してみてくださいCSSテンプレートのを何とかそれはあなたが話している問題の種類を扱っています。

現時点ではあなたが100％の高さの合計で2つのdivを持っている+ 65pxので、それはスクロールバーを持っている必要があります。

あなたは本当にあなただけのCSSハックに頼ることなく、divタグをしようとしているものを行うことはできません。それを行うための最も簡単で、ブラウザ互換性のある方法は、2行の表で囲むことであろう。 65px 100％、最初のTDの高さにテーブルの高さを設定し、第二のTD高さが指定されていません。一部の人々は、レイアウトのためにテーブルに頼ることに反対しているが、あなたは、なぜない？

間違ってとにかくCSSを使用しようとしている場合

、が、それだけで、他の上記1つのdivでデザインを使う方が良いでしょう。動的にブラウザにコンテンツを調整することにより、画面サイズの広いvarationにもううまく動作しません。

（100％+ N）> 100％ - "宇宙の残りの部分" のようなものは残念ながらCSSではありません。

あなたがあなたの最善の策は、jristaのオプション2または3のいずれかになるだろうので、100％それは、まさにそれを意味すると言う

（ABS位置決め私見避けるべきです）。私はまた、あなたが位置のgoogleしたいかもしれないと思う：固定を

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top