تحديد ارتفاع DIV حيوي

Question

في تطبيق ويب ، لدي صفحة تحتوي DIV الذي يحتوي السيارات-عرض حسب عرض نافذة المتصفح.

أنا بحاجة لصناعة السيارات ارتفاع الكائن.DIV يبدأ حول 300px من أعلى الشاشة ، ثم إنه ارتفاع ينبغي أن تجعل تمتد إلى الجزء السفلي من شاشة المتصفح.لدي ماكس ارتفاع الحاوية DIV لذا يجب أن يكون هناك حد أدنى ارتفاع عن شعبة.أعتقد أن مجرد تقييد ذلك في CSS و جافا سكريبت للتعامل مع حجم DIV.

بلدي جافا سكريبت ليست جيدة كما ينبغي أن يكون.هل هناك وسيلة سهلة النصي يمكنني أن أكتب التي من شأنها أن تفعل هذا من أجلي ؟

تحرير:DIV منازل تحكم هل هو نفسه تجاوز التعامل مع (الأدوات الخاصة بها شريط التمرير).

Answer 1

هذه محاولة بسيطة وظيفة محددة:

function resizeElementHeight(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

انها لا تعتمد على المسافة الحالية من الجزء العلوي من الجسم يجري المحدد (في حالة 300px التغييرات).

---

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

Answer 2

ما يجب أن يحدث في حالة تجاوز?إذا كنت تريد أن مجرد الحصول على الجزء السفلي من النافذة ، استخدام المواقع المطلق:

div {
  position: absolute;
  top: 300px;
  bottom: 0px;
  left: 30px;
  right: 30px;
}

هذا سوف وضع DIV 30px من كل جانب ، 300px من أعلى الشاشة ، ثم مطاردة مع الجزء السفلي.إضافة overflow:auto; للتعامل مع الحالات التي يكون فيها محتوى أكبر من شعبة.

---

تحرير:@أيا تميز هذا التفسير سيكون من الرائع...هو شيء خاطئ مع الجواب ؟

Answer 3

document.getElementById('myDiv').style.height = 500;

هذا هو أساسي جدا JS التعليمات البرمجية المطلوبة لضبط ارتفاع وجوه الخاص بك بشكل ديناميكي.أنا فقط فعلت هذا الشيء جدا حيث كان لدي بعض السيارات ارتفاع العقار ، ولكن عند إضافة بعض المحتوى عبر XMLHttpRequest أنا في حاجة إلى تغيير بلدي الأم div وهذا offsetheight الملكية لم خدعة في IE6/7 FF3

Answer 4

DIV منازل تحكم هل هو نفسه تجاوز التعامل.

Answer 5

إذا فهمت ما تطلبه هذا ينبغي أن تفعل خدعة:

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("yourDiv").height = windowHeight - 300 + "px";

Answer 6

مع التصحيحات الطفيفة:

function rearrange()
{
var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined'
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop  - 6)+ "px";
}

Answer 7

أبسط ما أستطيع...

function resizeResizeableHeight() {
    $('.resizableHeight').each( function() {
        $(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
    });
}

الآن كل ما عليك القيام به هو إضافة resizableHeight فئة كل ما تريد أن autosize (إلى الأم).

Answer 8

مستوحاة من @جيسون-الرايات ، نفس الشيء إما ارتفاع أو عرض:

function resizeElementDimension(element, doHeight) {
  dim = (doHeight ? 'Height' : 'Width')
  ref = (doHeight ? 'Top' : 'Left')

  var x = 0;
  var body = window.document.body;
  if(window['inner' + dim])
    x = window['inner' + dim]
  else if (body.parentElement['client' + dim])
    x = body.parentElement['client' + dim]
  else if (body && body['client' + dim])
    x = body['client' + dim]

  element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}