html - unity - transform css



كيفية فرض Div Div على 100٪ من Div Div بدون تحديد طول الوالد؟ (16)

لدي موقع بالهيكل التالي:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

يكون التنقل على اليمين ويكون div المحتوى على اليمين. يتم سحب المعلومات الخاصة بـ div للمحتوى من خلال PHP ، لذلك فهي مختلفة في كل مرة.

كيفية تغيير حجم التنقل رأسيًا بحيث يكون ارتفاعه مماثلًا لارتفاع div للمحتوى ، بغض النظر عن الصفحة التي يتم تحميلها؟

https://ffff65535.com


تعمل هذه الخدعة: إضافة عنصر نهائي في قسم HTML الخاص بك بنمط واضح: كلاهما ؛

    <div style="clear:both;"></div>

كل شيء قبل ذلك سيتم تضمينه في الارتفاع.


[بالإشارة إلى رمز ديميتي الأقل في إجابة أخرى] أنا أظن أن هذا نوع من "الكود الزائف"؟

من خلال ما أفهمه ، جرب استخدام تقنية الأعمدة الزائفة التي يجب أن تؤدي المهمة.

faux-columns

أتمنى أن يساعدك هذا :)


أسهل طريقة للقيام بذلك هي مجرد مزيف. وقد غطت شركة List Apart ذلك على نطاق واسع على مر السنين ، faux-columns .

إليك كيف أفعل ذلك عادةً:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

يمكنك بسهولة إضافة رأس على هذا التصميم من خلال لف #container في div آخر ، وتضمين عنوان div كـ sirling # container ، وتحريك أنماط الهامش والعرض إلى الحاوية الرئيسية. أيضا ، يجب أن يتم نقل CSS إلى ملف منفصل ولا يتم الاحتفاظ به مضمنة ، إلخ. إلخ. وأخيرا ، يمكن العثور على فئة clearfix في positioniseverything .


أعلم أن الوقت قد مضى منذ طرح السؤال ، لكنني وجدت حلاً سهلاً واعتقدت أن أحدهم يمكنه استخدامه (آسف على اللغة الإنجليزية الفقيرة). من هنا تبدأ:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

مثال بسيط. لاحظ أنه يمكنك أن تتحول إلى استجابة.


إضافة display: grid إلى الأم


إعطاء position: absolute; إلى الطفل عملت في حالتي


بعد بحث طويل ومحاولة ، لا شيء يحل مشكلتي إلا

style = "height:100%;"

على الأطفال div

وللوالدين تطبيق هذا

.parent {
    display: flex;
    flex-direction: column;
}

أيضا ، أنا باستخدام bootstrap وهذا لم يفسد استجابة بالنسبة لي.


بلدي الحل:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

جرب جعل الهامش السفلي 100٪.

margin-bottom: 100%;

في مشروع RWD ، من الأفضل استخدام jQuery. بالنسبة لشاشة صغيرة ، قد ترغب في الحفاظ على الارتفاع التلقائي حيث يتم تكديس col1 و col2 و col3 على بعضها البعض.

ولكن بعد نقطة توقف الاستعلام عن الوسائط ، ترغب في ظهور الحروف بجوار بعضها البعض مع ارتفاع متساوٍ لكل الأعمدة.

1125 بيكسل هو مجرد مثال على نقطة توقف عرض النافذة التي تريد بعدها أن تضبط جميع الأعمدة على نفس الارتفاع.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

يمكنك ، بالطبع ، وضع المزيد من نقاط التوقف إذا كنت تريد ذلك.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            if (window.innerWidth>= 1125) {
              $('.col1').height($('.wraper').height());
              $('.col2').height($('.wraper').height());
              $('.col3').height($('.wraper').height());
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

للوالد:

display: flex;

يجب عليك إضافة بعض البادئات ، http://css-tricks.com/using-flexbox/ .

تعديل: كما لاحظتAdam Garner ، محاذاة العناصر: stretch؛ لسنا بحاجته. استخدامه هو أيضا لأولياء الأمور ، وليس الأطفال. إذا كنت تريد تحديد امتداد الأطفال ، فستستخدم المحاذاة الذاتية.


هذه مسألة محبطة تعاملت مع المصممين طوال الوقت. الحيلة هي أنك تحتاج إلى ضبط الارتفاع إلى 100٪ على BODY و HTML في CSS.

html,body {
    height:100%;
}

هذا الرمز الذي لا معنى له هو تعريف المتصفح بما يقصده 100٪. محبط ، نعم ، ولكن أبسط طريقة.


height : <percent> لن يعمل إلا إذا كان لديك جميع العقد الأصلية مع ارتفاع في المئة المحدد مع ارتفاع ثابت في بكسل ، نظم الإدارة البيئية ، وما إلى ذلك في المستوى العلوي. بهذه الطريقة ، سيتدرج الارتفاع لأسفل إلى العنصر الخاص بك.

يمكنك تحديد 100٪ إلى html وعناصر الجسم كما ورد فيTravis سابقًا لجعل ارتفاع الصفحة متتاليًا إلى العقد.


ملاحظة : تنطبق هذه الإجابة على المتصفحات القديمة دون دعم لمعيار Flexbox. لنهج حديث ، انظر: https://.com/a/23300532/1155721

أقترح عليك إلقاء نظرة على أعمدة ارتفاع متساوية مع CSS عبر متصفح و لا المأجورون .

بشكل أساسي ، يعتبر القيام بذلك باستخدام CSS بطريقة متوافقة مع المستعرض ليس تافهاً (ولكن تافهاً مع الجداول) بحيث تجد لنفسك حلاً مناسبًا مناسبًا.

أيضا ، يختلف الجواب على ما إذا كنت تريد ارتفاع 100 ٪ أو ارتفاع متساو. عادة ما يكون ارتفاع متساو. إذا كان ارتفاعها 100٪ ، تختلف الإجابة قليلاً.


#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

انظر الى هذا المثال .


.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

من عند:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

تنصيب bootstrap لكنك لا تحتاج إلى bootstrap لاستخدام هذا. الإجابة على هذا السؤال القديم ، لأن هذا الأمر كان ناجحًا بالنسبة لي ، ويبدو أنه من السهل تنفيذه.

كان هذا هو نفس الجواب الذي قدمته لهذه Question





scale