تخطيط CSS مع بكسل والنسب النسبية

Question

لدي حمس يحتوي على اثنين من العطلات المتداخلة، واحدة تحدد ارتفاع 65 بكسل (رأس)، والآخر الذي يحدد الارتفاع بنسبة 100٪ (محتوى) ومن المفترض أن يستغرق ما تبقى من الفضاء بشكل خاص. عند تقديم الصفحة، يوجد شريط تمرير على اليمين بسبب الارتفاع المحدد من 65 بكسل من الرأس.

ماذا أفعل خطأ خلط النسب والبكسل؟ يجب أن أكون في عداد المفقودين شيء. كيف يمكنني إصلاح هذا حتى يستخدم قسم المحتوى بقية مساحة الصفحة وليس لدي شريط تمرير؟

هنا هي علامة ASP .NET Markup و 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>   

أتش تي أم أل {الحشو: 0px؛ الهامش: 0px؛ الحدود: لا شيء؛ العرض: 100٪؛ الارتفاع: 100٪؛ Font-Family: Verdana؛ الخط الحجم: X- صغير؛ خط الوزن: طبيعي؛ نمط الخط: طبيعي؛ الخط المتغير: طبيعي؛ تحويل النص: لا شيء؛ تحويل النص: لا شيء؛ تعويم: لا شيء؛ } هيئة {الحدود: لا شيء؛ الحشو: 0px؛ الارتفاع: 100٪؛ العرض: 100٪؛ الحدود: لا شيء؛ الهامش: 0px؛ } نموذج {الحدود: لا شيء؛ الهامش: 0px؛ الحشو: 0px؛ الحدود: لا شيء؛ الارتفاع: 100٪؛ العرض: 100٪؛ } span.appname {text-align: حق؛ Font-Family: Arial، Helvetica، Sans-serif؛ الخط الحجم: 18pt؛ خط الوزن: جريئة؛ نمط الخط: طبيعي؛ اللون: #FFFFFF؛ الحشو الحق: 10 بكسل؛ } #HEADER {خلفية: # 295984؛ العرض: 100٪؛ الارتفاع: 65 بكسل إخفاء الفائض؛ } # Ordentent {display: مضمنة؛ العرض: 100٪؛ الارتفاع: 100٪؛ } #outer {الارتفاع: 100٪؛ إخفاء الفائض؛ الموقف: قريب؛ العرض: 100٪؛} #outer [ID] {عرض: الجدول؛ الموقف: ثابت؛} # # ميدل {الموقف: مطلق؛ أعلى: 50٪؛ العرض: 100٪؛ نص محاذاة: مركز؛} / * للمستكشف فقط * / # #Middle [معرف] {عرض: خلية الجدول؛ العمودي المحاذاة: وسط؛ الموقف: ثابت؛} #inner {position: قريب؛ أعلى: -50٪؛ محاذاة النص: اليمين؛} / * للمستكشف فقط * / #inner {العرض: 100٪؛ الهامش اليسار: السيارات؛ الهامش الحق: السيارات؛} / * لجميع المتصفحات * / #inner [معرف] {position: ثابت؛}

Answer 1

إن أبسط الحل هو نقل رأسك إلى المحتوى الخاص بك ... ثم سوف يستغرق مساحة داخل كتلة المحتوى، بدلا من فوقها.

إذا لم يكن هذا خيارا، فهناك مجموعة متنوعة من الحلول التي يمكن أن تحل المشكلة. فيما يلي قائمة ببعض:

1) وضع رأسه تماما الرأس، مع z-index of say 10. إعطاء المحتوى DIV قزم من 65 بكسل، مع مؤشر Z من 1. يجب أن يغطي الرأس المساحة المبذولة العلوية من المحتوى DIV. سيعمل هذا بشكل رائع مع تصاميم جامدة للغاية لا تملك أي عرض ديناميكي ينمو / يتقلص مع عرض نافذة المتصفح.

2) وضع صراحة الجزء العلوي الأيسر، اليسار، أسفل، يمين حق المحتوى الخاص بك. حدد عدم العرض أو الارتفاع. في هذه الحالة، يتم احتساب الأعلى، الأيسر، أسفل، واليمين على أساس حافة الحشو الداخلية للكتلة المحتوية من المحتوى DIV. مرة أخرى، هذا يعمل بشكل رائع في تصاميم موقع جامدة. يجب أن تعمل في IE7 / 8، ولكنها ستكون مشكلة مع IE6 والإصدارات السابقة.

3) استخدم هامش أعلى سلبي OG -65PX على المحتوى DIV. استخدام حشوة أعلى 65px للتعويض. هذا يمكن أن يكون مشكلة مع IE7 والإصدارات السابقة، وأحيانا يتخلل فايرفوكس مع هوامش سلبية. هناك اختراق يمكن حل المشكلة، فقط ابحث في الشبكة. هذا يجب أن يعمل من أجل تخطيطات جامدة أو السوائل.

هناك الكثير من الموارد لتصميم CSS على الشبكة. إذا لم تنجح الخيارات المذكورة أعلاه، فيجب أن يظهر بعض عمليات البحث على الشبكة بعض الموارد.

Answer 2

حاول القراءة هذه المقالة أولا ... الأمر المراكز المطلقة المتضاربة في قالب CSS ويعالج بطريقة أو بأخرى نوع المشكلة التي تتحدث عنها.

Answer 3

في الوقت الحالي، لديك 2 Divs مع ارتفاع إجمالي 100٪ + 65PX لذلك يجب أن يكون لديك شريط التمرير

لا يمكنك فعل ما تحاوله حقا مع Divs فقط دون اللجوء إلى Racks CSS. إن أبسط وسيلة متوافقة مع معظم المتصفح للقيام بذلك ستوفرها في جدول صفين. قم بتعيين ارتفاع الجدول إلى 100٪، وارتفاع TD أولا إلى 65 بكسل، ارتفاع TD الثاني غير محدد. بعض الناس يعارضون اللجوء إلى الجداول للتخطيط ولكن إذا كنت ستستخدم CSS بشكل غير صحيح على أي حال، فلماذا لا؟

على الرغم من أنه سيكون من الأفضل استخدام تصميم فقط مع حرف واحد فوق الآخر. لا يعمل ضبط المحتوى بشكل حيوي للمتصفح جيدا بعد الآن بسبب متباين واسع من أحجام الشاشة.

Answer 4

(100٪ + ن)> 100٪ - لا يوجد شيء مثل "بقية المساحة" في CSS لسوء الحظ.

عندما تقول 100٪، فهذا يعني ذلك بالضبط، لذلك سيكون أفضل رهان إما خيارات JRISTA 2 أو 3 (يجب تجنب تحديد موقع IMHO ABS). أعتقد أيضا أنك قد ترغب في وضع Google: ثابت.