Div العرض 100% ناقص مبلغ ثابت من بكسل

Question

كيف يمكن تحقيق ما يلي هيكل بدون استخدام الجداول أو جافا سكريبت ؟ الأبيض الحدود تمثل حواف divs و ليست ذات الصلة.

حجم المنطقة في منتصف سوف تختلف, ولكن سيكون لديك بالضبط بكسل القيم الهيكل كله يجب أن مقياس وفقا لتلك القيم.لتبسيط ذلك, كنت بحاجة إلى وسيلة إلى تعيين "100% - n px" عرض أعلى منتصف و أسفل منتصف divs.

أنا أقدر نظيفة عبر متصفح الحل ، ولكن في حال لم يكن ذلك ممكنا ، CSS الخارقة سوف تفعل.

وهنا مكافأة.هيكل آخر كنت في صراع مع وينتهي باستخدام الجداول أو جافا سكريبت.انها مختلفة قليلا ، ولكن يقدم مشاكل جديدة.كنت أساسا تستخدم في مسج القائمة على نظام النوافذ, ولكن أود أن الحفاظ على تخطيط من النصي فقط التحكم في حجم عنصر واحد (الأوسط).

Answer 1

ويمكنك استخدام العناصر المتداخلة والحشو للحصول على حافة اليسار واليمين على شريط الأدوات. العرض الافتراضي لعنصر div هو auto، وهو ما يعني أنه يستخدم العرض المتاحة. ثم يمكنك إضافة الحشو لعنصر وأنه لا يزال يحتفظ ضمن العرض المتاحة.

وهنا مثال التي يمكنك استخدامها لوضع الصور وتدوير زوايا اليسار واليمين، وصورة المركز الذي يكرر بينهما.

ووHTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

ووCSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Answer 2

طريقة جديدة أنا فقط تعثرت على: css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

المصدر: css العرض 100% ناقص 100px

Answer 3

وعلى الرغم الجواب Guffa وتعمل في كثير من الحالات، وفي بعض الحالات قد لا ترغب في قطع اليسار و/ أو اليمين من الحشو ليكون الوالد من شعبة مركز. في هذه الحالات، يمكنك استخدام سياق كتلة التنسيق على المركز وتعويم عناصر div الحشو اليسار واليمين. هنا هو رمز

ووHTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

ووCSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

وأنا أشعر أن هذا التسلسل الهرمي العنصر أكثر طبيعية بالمقارنة مع عناصر div المدمجة والمتداخلة، ويمثل أفضل ما على الصفحة. وبسبب هذا، والحدود، ويمكن تطبيق الحشو، وهامش عادة لجميع العناصر. (أي: هذا 'naturality' تتجاوز أسلوب ولها تشعبات)

لاحظ أن هذا يعمل فقط على عناصر div والعناصر الأخرى التي تشترك في 'بتوفير 100٪ من عرض افتراضيا "الملكية. والمدخلات، والجداول، وربما البعض الآخر يطلب منك للالتفاف عليها في شعبة حاوية وإضافة أكثر من ذلك بقليل المغلق لاستعادة هذه النوعية. إذا كنت سيئ الحظ بما يكفي لتكون في هذا الوضع، في الاتصال بي، وأنا سوف حفر المغلق.

وjsfiddle هنا: jsfiddle.net/RgdeQ

واستمتع!

Answer 4

يمكنك جعل استخدام من Flexbox تخطيط.تحتاج إلى تعيين flex: 1 على العنصر الذي يحتاج إلى ديناميكية العرض أو الطول flex-direction: row and column على التوالي.

ديناميكية العرض:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

الإخراج:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

---

الارتفاع الديناميكي:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

الإخراج:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

Answer 5

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

وإذا كان يجب أن تفعل ذلك من دون عناصر إضافية (على سبيل المثال. عندما لم يكن لديك السيطرة على ترميز الصفحة)، يمكنك استخدام <لأ href = "https://stackoverflow.com/questions/628500/can-i -Stop-100-عرض النص صناديق-من-مد-وراء الخاصة بهم الحاويات / 628912 # 628912 "> تحجيم مربع ، التي لديها لائق جدا ولكن لم يكتمل أو بسيطة دعم المتصفح. على الأرجح أكثر متعة من الحاجة إلى الاعتماد على البرمجة بالرغم من ذلك.

Answer 6

وربما أنا يجري البكم، ولكن ليس الجدول الحل الواضح هنا؟

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

وهناك طريقة أخرى أن لقد برزت في الكروم، بل هو أبسط، ولكن الرجل هو أنه الإختراق!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

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

Answer 7

ويمكننا تحقيق ذلك باستخدام المرن مربع بسهولة بالغة.

وإذا كان لدينا ثلاثة عناصر مثل رأس، MiddleContainer وتذييل. ونحن نريد أن نعطي بعض ارتفاع ثابت لرأس وتذييل. ثم يمكننا أن أكتب مثل هذا:

لتتفاعل / RN (الافتراضية هي 'عرض' كما المرن و "flexDirection 'كما عمود)، في شبكة الإنترنت المغلق سيكون لدينا لتحديد الحاوية الجسم أو الحاويات التي تحتوي على هذه كما عرض:" المرن "، المرن الاتجاه: "عمود" مثل أدناه:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

Answer 8

وماذا لو كان شعبة التفاف بنسبة 100٪ واستخدمته الحشو لكمية بكسل، ثم إذا كان الحشو # يجب أن يكون ديناميكية، يمكنك بسهولة استخدام مسج لتعديل مقدار الحشو عند الأحداث الحريق.

Answer 9

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

وCSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

وكان مفتاح العلامة الصحيحة. أنا في الأساس تحديد أنني أريد أن أكرر من 131px من الناحية اليسرى ل0px من الجهة اليمنى.

Answer 10

في بعض السياقات، يمكنك الاستفادة من إعدادات الهوامش لتحديد فعالية "100٪ بكسل عرض ناقص N". وينظر جواب قبلت <لأ href = "https://stackoverflow.com/questions/468038/in-css-how-do-i-get-a-left-side-fixed-width-column-with-a- جدول الجانب الأيمن إن "> هذا السؤال .