Есть ли способ установить ширину абсолютного элемента 100% и соответствовать экрану (не родительскому) внутри относительного элемента? Вот мой кодАбсолютное позиционирование внутри относительно 100% -ной ширины
<div class="relative">
...
<div class="absolute"></div>
...
</div>
Css код:
.relative{
position:relative;
width:600px;
}
.absolute{
border:1px solid red //draw a line across screen
position:absolute;
width:100%;
}
Да, вы можете использовать 100vw, равную ширине окна, а также использовать calc в положение абсолютного элемента. Поэтому, если ширина родительского элемента равна 50%, чтобы установить абсолютный элемент в left: 0 окна, вы можете использовать transform: translate(calc(-100vw + 75%)), который в этом случае равен -25vw.
html,
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.relative {
position: relative;
width: 50%;
background: lightblue;
height: 50px;
margin: 0 auto;
}
.absolute {
position: absolute;
left: 0;
background: black;
height: 2px;
top: 50%;
width: 100vw;
transform: translate(calc(-100vw + 75%), -50%);
}<div class="relative">
<div class="absolute"></div>
</div>Что произойдет, если ширина = 500px не процентов? – Cooper
@CooPer Затем вы можете использовать что-то вроде этого https://jsfiddle.net/Lg0wyt9u/1052/ –
Просто установите левый: 20px; и справа: 20px; и удалять ширину: 100%
.box2 {
position: absolute;
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
или добавить слева: 20px; и функция известково ширина: известково (100% - 40px)
.box2 {
position: absolute;
width: calc(100% - 40px);
padding: 50px 0;
color: #000;
background: #fff;
border: solid thin #06F;
}
Я отредактировал мой вопрос – Cooper
Добавить высоту 1px DIV для линии и придать ему 100vw ширину.
HTML
<div class="relative">
...
<div class="absolute"></div>
<div class="line"></div>
...
</div>
CSS
.relative{
position:relative;
width:600px;
}
.line {
height:1px;
width:100vw;
background:red;
}
.absolute{
position:absolute;
width:100%;
}
Попробуйте это,
body{
margin:0;
}
.relative{
position:relative;
}
.absolute{
width:100%;
height:1px;
background:red;
position:absolute;
}
С одного края экрана к следующему краю является полным Ленг й видовой области. Самый простой способ добиться этого - использовать vw (ширина видового экрана). 100vw - полная ширина окна просмотра. Чтобы растянуть абсолютное положение div слева и справа, оба равны 0. Сделали линию, используя border-bottom.
div {} .A {
min-width: 100%;
position: relative;
background: rgba(255, 0, 0, .4);
height: 200px;
}
.B {
min-width: 100vw;
position: absolute;
right: 0;
left: 0;
background: blue;
height: 100px;
border-bottom: 3px solid yellow;
}<div class='A'>
<div class='B'></div>
</div>@CooPer: Если родитель с положением относительно не имеет ширину 100%, ребенок с позиции абсолютного впишется в «родительский» ширину, если вы установите ширину 100% для ребенка элемент. Значение для дочернего класса будет составлять 300 пикселей границы только как показано ниже.
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
border: 1px solid red;//draw a line across screen
position: absolute;
width: 100%;
}<div class="parent">
<div class="child"></div>
</div>Так что, если вы хотите ребенка на 100% и по размеру экрана. Попробуйте ниже.
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
border: 1px solid red;//draw a line across screen
position: absolute;
width: 100vw;//take up 100% viewport width
}<div class="parent">
<div class="child"></div>
</div>оч.сл., В.Х. была поддержана так IE9. http://www.w3schools.com/cssref/css_units.asp
Пожалуйста, поделитесь своими HTML-код, а также. – RasmusGlenvig
@RasmusGlenvig i add it – Cooper
Что вы подразумеваете под «подгонять экран внутри относительного элемента»? – Roysh