HTML и CSS: Как выложить тег div с шириной: 100% и слева: 300px

Question

У меня проблема с настройкой стиля тега div. Я хотел иметь тег div, начинающийся слева: 300 пикселей и диапазон до конца экрана браузера. Но если я ставлю ширину: 100%, тег div выйдет за пределы экрана браузера.

Answer 1

Использование JQuery

$('.elementClass').width($(window).width()-300); 

Answer 2

Просто используйте право.

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

https://jsfiddle.net/v2qq0gyp/1/

Вы также можете сделать это для верхней и нижней части, что приводит к полной страницы DIV:

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

С позиции относительной:

div { 
 
    position: relative;  
 
    left: 30%; 
 
    right: 0;  
 
    margin-right: 30%; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna. 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat urna, interdum non velit id, fringilla tempus lectus. Integer fermentum est in nisi lobortis aliquet. Sed rutrum purus purus, non fermentum nulla volutpat id. In lacus lacus, condimentum ut sollicitudin id, finibus et sem. Nulla magna elit, sagittis vitae tortor eu, tempor placerat elit. Fusce fringilla quam in erat commodo, eget vehicula tellus eleifend. Donec vitae nisi urna. 
 
</div>

Answer 3

Вы также можете использовать calc по ширине.

Пример:

div { 
position: absolute; 
left: 300px; 
width: calc(100% - 300px); 
} 

Он не доступен во всех браузерах согласно комментарии ... Here's скрипку, тем не менее.

Answer 4

Я считаю, что вы могли бы решить, добавив «padding-left» или «margin-left» вместо «left». И не указывайте «width: 100%».

Answer 5

Другим вариантом было бы использовать влево,%

left: 30%; 
width: 70%; 

Answer 6

Try это надо правильно работает :)

Код:

div{ 
 
    height: 100px; 
 
    margin-left: 300px; 
 
    background-color: red; 
 
}

<div> Content </div>

Answer 7

Здесь много преувеличенных решений.

A div - элемент блока, который, естественно, расширяется до полной ширины его родителей. Это означает, что вам нужно только немного оттолкнуть его слева, как минимальное решение, и в зависимости от содержащего элемент он будет работать из коробки. Добавьте класс к div, чтобы получить некоторые лучшие практики происходят и использование:

.class { 
    width: auto; // is default 
    margin-left: 300px; 
}