Вопрос по css, html, javascript – Почему scrollWidth включает только левый отступ?

6

Итак, у меня есть DIV#Wrapper который имеет фиксированную ширину. Внутри этого DIV у меня есть еще один DIV#Panel который также имеет фиксированную ширину:

<code><div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  
</code>

Иногда ширина Panel больше, чем у Wrapper, и в этих случаях я хотел бы расширить Wrapper с помощью JavaScript, чтобы он идеально оборачивал Panel.

Live demo: http://jsfiddle.net/H6rML/

Я намеревался использовать.scrollWidth на обертке, чтобы определить ширину панели. Однако проблема заключается в том, что оболочка имеет горизонтальное заполнение, а.scrollWidth по какой-то причине включает только левый отступ от оболочки. Так:

<code>Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
</code>

Итак, учитывая:

<code>#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}
</code>

Wrapper.scrollWidth возвращается310pxчто не очень полезно. Если.scrollWidth Я не включал отступы и возвращал только ширину Panel, я мог работать с этим (я бы добавил отступ вручную к этому значению). Если бы оба дополнения были включены, я мог бы работать с этим также. Но почему включена только левая прокладка? (Кстати, это поведение, похоже, кросс-браузерное.)

Несколько дополнительных заметок:

I cannot set the width on the Wrapper directly. In my actual code, I set the width on an ancestor element that is several levels above the Wrapper, and I use a custom API to set the width. This is why I need to retrieve the full 320px value.

I would like a solution that does not depend on the content of the Wrapper. In my demo it's a Panel, but in other scenarios there could be a different element that overflows, or even multiple elements. That is why I went with .scrollWidth on the Wrapper.

Есть ли способ получить значение320px без необходимости вручную добавлять правый отступ к.scrollWidth значение?

Между прочим, в соответствии со стандартом, правильное дополнение должно быть включено:

The scrollWidth attribute must return the result of running these steps:

If the element does not have any associated CSS layout box return zero and terminate these steps.

If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).

If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).

Return the computed value of the 'padding-left' property, plus the computed value of the 'padding-right', plus the content width of the element.

Источник:http://www.w3.org/TR/cssom-view/

Почему браузеры не ведут себя соответствующим образом?

Для дальнейшего повышения ясности моего поста позвольте мне подвести итог двум основным вопросам:

(1) Если стандарт гласит, что в дополнение к.scrollWidth значение, то почему браузеры ведут себя соответственно?

(2) Можно ли получить правильное значение (320px в моем случае), без необходимости вручную добавлять нужные отступы?

This question has been answered in another thread

Ответ на этот вопрос находится здесь:Когда дочерний элемент переполняется горизонтально, почему правый отступ родительского элемента игнорируется?

& # X200B;

@ RokoC.Buljan Я не могу установить ширину в оболочке напрямую. Пожалуйста, прочитайте комментарии ниже, ответ Эллиота. Я уточню свой вопрос, чтобы уточнить это. Šime Vidas
@ RokoC.Buljan Как я уже сказал, я делаюnot установите ширину в оболочке, но на внешнем элементе (предке, который находится дальше по дереву DOM). У меня есть пользовательская функция, которая устанавливает ширину этого предка, и для того, чтобы он правильно установил ширину, я должен передать значение320 к этому.Wrapper.scrollWidth (неправильно?) возвращает значение310 (он не включает правильное заполнение), поэтому я должен выяснить, как справиться с этой проблемой. (Pozdrav:)) Šime Vidas
П.С .: Вы действительно не можете использовать jQ для этой цели?jsfiddle.net/ytByf/1  с помощью.outerWidth(true) он возвращает «320»; ! Надеюсь, это поможет! (Привет Загребу.) Roko C. Buljan
Почему вам нужно пересчитать#Wrapper ширина? После#Panel отлично завернут, я бы не стал больше заморачиваться :) Roko C. Buljan

Ваш Ответ

4   ответа
0

$(function() {
    $("#Wrapper").width($("#Panel").outerWidth());
});

Это учитывает#Panelотступы, поля и т. д.

.innerWidth() не может быть установлен; это метод только для чтения. Как я уже сказал, я не устанавливаю ширину на обертке, но на внешнем элементе. Это не может быть изменено. Šime Vidas
К сожалению, я не устанавливаю ширину для самого Wrapper. Код в моем ответе - это упрощенная версия моего реального кода. В моем коде у меня есть несколько слоев оберток (один из них - iframe), а ширина задается сторонним API (не jQuery). Поэтому мне нужно определить правильное значение (320px в моем примере выше). Šime Vidas
Заменить «оболочку»; с идентификатором элемента, который вы устанавливаете ширину, тогда, верно?
Может быть, вы хотите установить$("#Wrapper").innerWidth() вместо.
Это не сработает, потому что ваш код не учитывает заполнение Wrapper. Значение$("#Panel").outerWidth() является300, но ценность, которая мне нужна320, В особом случае, когда вы устанавливаете ширину на самом Wrapper, вы можете использовать значение300, но если вы установите ширину на внешнем элементе (вы должны принять во внимание горизонтальный отступ Wrapper). Šime Vidas
0

почему ведущие браузеры делятся этой ошибкой до сегодняшнего дня, но вотdemo of the problem and inline-block workaround.

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth 
                          +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth
                          +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth
                          +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)';
.parent{
  border:1px solid rgba(50,150,220,1);
}
.child{
  background:rgba(100,200,255,0.3);
  padding:10px 20px;
  white-space:nowrap;
}
.scroll-container{
  border:1px solid red;
  display:inline-block;
  overflow:hidden;
}
.two, .three, .four{
  width:60px;
}
.three .child{
  display:inline-block;
}
.four .parent{
  display:inline-block;
}
<div class="scroll-container one">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container two">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container three">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>
<div class="scroll-container four">
  <div class="parent">
    <div class="child">Lorem ipsum dolor</div>
    <div class="child">Lorem ipsum dolor sit amet</div>
  </div>
</div>
<br>

1

правильно ли я понимаю, но из того, что я прочитал, я предполагаю, что вы хотите изменить ширину #Wrapper на основе #Panel. В этом случае, возможно, вы могли бы попробовать следующее:

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}
0

#Wrapper {
    min-width: 200px;
    padding: 10px;
    float: left; 
}

или используйте jQuery

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});
Когда элемент перемещается, он удаляется из потока страниц. Существуют различные различия между элементами in-flow и out-of-flow: они расположены по-разному, разные свойства CSS применяются по-разному (разные алгоритмы используются для определения вычисленного значения) или вообще не применяются. Šime Vidas
Вы можете использовать JQuery, как решение выше?
Можете ли вы использовать метод jquery выше? Почему плавающее оно оставило такие радикальные изменения?
Переключение элемента на float - это относительно большое изменение, которое может вызвать проблемы с существующим кодом CSS / JavaScript, поэтому я рассматриваю его только как возможное последнее средство ... Šime Vidas

Похожие вопросы