Изменение размера div по высоте и ширине

Я пытаюсь изменить размер div в соответствии с высотой и шириной браузера. Предполагается, что div должен быть пустым в начале и всегда должен иметь ширину 100% и высоту 50%, используя ТОЛЬКО javascript.Изменение размера div по высоте и ширине

Вот код, в данном случае я использовал screen.availHeight и screen.availWidth, который отлично работает только в полноэкранном режиме.

/* pw stand for width percentage 
 
    ph for height percentage */ 
 

 
var adaptToScreen = function(el,pw,ph){ 
 

 

 
var screenW = screen.availWidth; 
 
var screenH = screen.availHeight; 
 

 
var w = screenW*(pw/100); 
 
var h = screenH*(ph/100); 
 

 

 
el.style.height=h+"px"; 
 
el.style.width=w+"px"; 
 

 
}; 
 

 
adaptToScreen(toDoList,100,50);

<div id="to-do"></div>

источник

2015-07-25 Met

Почему вы не можете просто использовать CSS? Простой, как «ширина: 100%; height: 50%; ' –

, потому что div в начале пуст. Я уже пробовал, что он не работает, я мог бы использовать пиксели в качестве единицы, но тогда у меня были бы другие результаты на других устройствах. – Met

для использования CSS вам нужно установить высоту и положение свойства HTML и элемента BODY. set 'position: relative; height: 100%; 'для тегов html и body. он будет работать –

Проверьте это fidde Я использовал window.innerWidth и window.innerHeight, чтобы получить высоту и ширину области просмотра. , если вы хотите использовать clientWidth и clientHeight, вам нужно установить высоту элемента HTML и BODY на 100%, чтобы они потребляли всю высоту видового экрана, и из этого можно вычислить высоту 50%.

/* pw stand for width percentage 
 
ph for haight percentage */ 
 

 
var adaptToScreen = function(el,pw,ph){ 
 

 
    //var screenW = document.body.clientWidth; 
 
    //var screenH = document.body.clientHeight; 
 
    var screenW = window.innerWidth; 
 
    var screenH = window.innerHeight; 
 

 
    var w = screenW*(pw/100); 
 
    var h = screenH*(ph/100); 
 

 

 
    el.style.height=h+"px"; 
 
    el.style.width=w+"px"; 
 

 
}; 
 
var toDoList = document.getElementById('to-do'); 
 
adaptToScreen(toDoList,100,50);

<div id="to-do"></div>

источник

2015-07-25 21:16:15

. Я пробовал window.innerHeight, но он выводит тот же результат, я начинаю полностью sceen mode, тогда, когда я делаю браузер меньшим, ширина и высота div остаются такими, как если бы браузер все еще находился в полноэкранном режиме – Met

, для этого вам нужно добавить обработчик размера, подобный этому 'window.onresize = function (event) { adaptToScreen (toDoList, 100, 50); }; ' –

Это должно работать:

adaptToScreen (document.getElementById ('Дела'), 100,50);

источник

2015-07-25 21:14:45 DarthDerrr

Является ли это родной функцией JS? Я не могу найти на нем никакой документации. – Anders

Я не включил document.getElementById ('to-do'); в моем посте, но я написал его в исходном коде на своем компьютере. – Met

adaptToScreen - это функция в вопросе, если это то, о чем вы спрашиваете о – DarthDerrr

Использование JS в данном случае является излишним. Это можно сделать со следующим CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#to-do { 
    height: 50%; 
    width: 100%; 
}

источник

2015-07-25 21:21:09

Изменение размера div по высоте и ширине

ответ

Смежные вопросы