定义响应div的宽度问题 [英] Trouble defining width of a responsive div
问题描述
我会有麻烦解释我的意思，但是忍受我。首先是我的小提琴 https://jsfiddle.net/jmajnqej/20/
#freelancewrapper {
width：calc（100％ - 238px）;
height：440px;
background-color：＃9D9D9D;
position：absolute;
right：0;
}
我试图让#freelancwrapper位于.contentwrapper内拥抱.contentwrapper的左侧，但同时具有更大的宽度，其延伸到触摸视口的右侧。
（请注意：小提琴目前适用于大约1400-1500像素的视口宽度，但尺寸大于freelancewrapper的宽度比父div大）。
如果有困惑这里希望我的图片进一步解释。
http://imgur.com/a/IrO5o （两种不同的屏幕尺寸）。
任何输入都非常感谢。
接近不同。 position：absolute 在开始时似乎是一个很好的解决方案，但它需要大量的维护，因为它使元素在布局中失去其空间，边距不会与其他。
为了简化操作，让我们来看一些基础知识。请考虑以下示例：
html，body {margin：0; padding：0;} div {background：blue; height：100px; width：100px;} div div {background：red; height：50px; width：200px; color：#FFF;}
< div& < div> 200px wide red div< / div>< / div> 100px wide blue div
如你所见，比父/容器大的元素默认是可见的。
现在从我的理解，将红色div扩展到屏幕右侧，同时确保解决方案具有响应性。在这种情况下，我们真正需要做的是计算我们的元素的债券（在这个例子中，蓝色容器）和视口侧之间的距离。
通常开发人员会使用javascript来进行这些计算，但是现代CSS3使我们能够使用 calc（）表达式与 vw / vh 视口单位。
< h2>用于将元素展开到视口侧的计算填充
此方法要求展开的div的宽度为 100％。请注意，此展开后的div的内容不会超出父元素的宽度。
padding-right：calc（（100vw - 100％）/ 2 ）;
100vw 100％是父级宽度（或最大宽度）除以2将导致元素和视口之间的空间（一侧）
html，body {margin：0; padding：0; max-width：100％; overflow-x：hidden;} / *确保防止水平滚动条* /。container {width：100px;背景：蓝色; height：200px; margin：0 auto;}。expanded {color：#FFF; height：100px;背景：红色; width：100％; / *方法工作所需的* / padding-right：calc（（100vw - 100％）/ 2）;}
< div class =container> < div class =expanded> I展开到视口的右侧< / div>< / div>
/ p>
还值得一提的是我已经应用了 overflow-x：hidden 和 max-width： 100％到body标记，以确保浏览器在计算不是四舍五入时显示滚动条（为了一致性）。
此方法很好，因为：
- 不打破布局
- 回应式（甚至适用于父/母的最小/最大宽度）
- 简单代码
b $ b
要考虑的缺点：
- 支持CSS
calc ） - 支持视口单位
- 支持视口单位计算（不适用于旧Safari浏览器） li>
- 没有右侧填充（可以通过在其他div中包装其他元素来解决）
最后，这里是一个简单的演示，使用您在图像中提供的布局显示效果： view on jsFiddle
body {width：100％; max-width：100％; overflow-x：hidden;}。wrapper {width：86％; max-width：1350px; margin：0 auto;背景：#EEE; position：relative;}。contentwrapper {height：300px; / *另一种方法基于宽度而不是右边填充* / / * width：93vw; * / / * max-width：calc（1350px +（（100vw - 1350px）/ 2））; * / width：100％; padding-right：calc（（100vw-100％）/ 2）;} / * ---------------------------- * // * demo styling / * ---------------------------- * / html，body {background：#FFF; margin：0; padding：0; font-family：sans-serif;}。contentwrapper {background：＃7f6e60 url（http://i.imgur.com/yKbPM43.jpg）no-repeat; background-size：cover; margin-bottom：30px;}。content {padding：1em; } #freelancewrapper {color：#FFF; padding：1em 2em;高度：100％; position：relative;}＃freelancewrapper p {background：rgba（255，0，45，0.58）;宽度：60％;身高：60％; padding：1em; font-weight：bold; position：absolute; bottom：-20px; overflow：hidden;}
<！ - main wrapper - >< div class ='wrapper'> <！ - 顶部的部分内容 - > < div class =content> < h3>内容已展开的div< / h3> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Ipsam nam ut incidunt odit ea blanditiis dicta alias，eaque iusto！ Voluptatem eveniet modi dignissimos praesentium adipisci quibusdam laudantium ex ut fugiat。< / p> < / div> <！ - div扩展到viewport的结尾（右侧） - > < div class ='contentwrapper'> < section id ='freelancewrapper'> < h1>为什么要雇用自由设计师？< / h1> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Facere，hic inventore sunt harum nesciunt voluptatem deserunt assumenda tenetur。 Explicabo，eligendi ipsum laboriosam porro nisi quos，qui，adipisci id veritatis necessitatib ducimus dignissimos maiores nobis voluptates perspiciatis vero？ Laborum fugiat itaque placeat，voluptatibus。 Repellendus fuga，vel alias eos molestias。< / p> < / section> < / div> <！ - 以下内容 - > < div class =content> < h3>内容下方展开div< / h3> < p> Temporibus possimus illo quis provident，illum perferendis maxime fugit tempora rem incidunt earum amet vitae atque est alias dolores totam architecto voluptatem voluptate，officiis deleniti enim accusantium laborum error。 Fugiat。< / p> < / div> < / div>
I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/20/
#freelancewrapper {
width: calc(100% - 238px);
height: 440px;
background-color: #9D9D9D;
position: absolute;
right: 0;
}
I'm trying to get #freelancwrapper which is positioned inside .contentwrapper to hug the left of the .contentwrapper but at the same time have a greater width which extends to touch the right side of the viewport.
(note: the fiddle currently works for roughly under 1400-1500px viewport width but at sizes larger than that the freelancewrapper extends wider than the parent div).
If there is confusing here hopefully my pictures further explain. http://imgur.com/a/IrO5o (two different screen sizes).
Any input is much appreciated.
Well, this could be approached differently. position:absolute seemed like a good solution at the start but it requires a lot of maintenance because it makes the element lose its space in the layout and the margins do not collapse with others.
To simplify things, let's go to the basics. Consider the following sample:
html, body {margin: 0;padding: 0;}
div {
background:blue;
height:100px;
width:100px;
}
div div {
background:red;
height:50px;
width:200px;
color:#FFF;
}
<div>
<div>200px wide red div</div>
</div>
100px wide blue div
As you can see, elements which are bigger than their parent/container are visible by default.
Now from my understanding, you wish to expand the red div to the right side of the screen while making sure the solution is responsive. In this case, what we really need to do is calculate the distance between our element's bonds (in this example, the blue container) and the viewport side.
Usually developers would resort to javascript to make these calculations, however, modern CSS3 enables us to do this natively using calc() expression with vw / vh viewport units.
Calculated padding for expanding element to viewport side
This method requires that the expanded div get a width of 100%. Please note that the content of this expanded div will not go outside the width of the parent. However, backgrounds will work as expected.
padding-right: calc((100vw - 100%) / 2);
100vw is the viewport, 100% is the parent's width (or max-width) divided by 2 will result in the space between the element and the viewport (one side)
html, body {margin: 0;padding: 0; max-width:100%; overflow-x:hidden;} /* makes sure to prevent horizontal scrollbar */
.container {
width:100px;
background:blue;
height:200px;
margin:0 auto;
}
.expanded {
color:#FFF;
height:100px;
background:red;
width:100%; /* required for method to work */
padding-right: calc((100vw - 100%) / 2);
}
<div class="container">
<div class="expanded">I expand to the right side of viewport</div>
</div>
Also worth mentioning that I have applied overflow-x:hidden and max-width:100% to the body tag to make sure browsers do not show scrollbars if the calculation was not rounded (for consistency).
This method is good because:
- Does not break layout
- Responsive (even works with min/max width of parent)
- Simple code
Drawbacks to consider:
- Support for CSS
calc() - Support for viewport units
- Support for viewport unit calculations (does not work for old Safari browsers)
- No right padding (can be solved by wrapping other elements in another div)
And finally, here is a simple demo that shows the effect using the layout you have provided in the images: view on jsFiddle
body {
width:100%;
max-width:100%;
overflow-x:hidden;
}
.wrapper {
width: 86%;
max-width: 1350px;
margin: 0 auto;
background: #EEE;
position: relative;
}
.contentwrapper {
height: 300px;
/* another method based on width instead of right padding */
/* width: 93vw; */
/* max-width: calc(1350px + ((100vw - 1350px) / 2)); */
width:100%;
padding-right: calc((100vw - 100%) / 2);
}
/* ---------------------------- */
/* demo styling
/* ---------------------------- */
html,
body {
background: #FFF;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.contentwrapper {
background: #7f6e60 url(http://i.imgur.com/yKbPM43.jpg) no-repeat;
background-size: cover;
margin-bottom:30px;
}
.content { padding: 1em; }
#freelancewrapper {
color:#FFF;
padding:1em 2em;
height: 100%;
position: relative;
}
#freelancewrapper p {
background: rgba(255, 0, 45, 0.58);
width:60%;
height:60%;
padding:1em;
font-weight: bold;
position: absolute;
bottom: -20px;
overflow: hidden;
}
<!-- main wrapper -->
<div class='wrapper'>
<!-- some content at top -->
<div class="content">
<h3>Content above expanded div</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nam ut incidunt odit ea blanditiis dicta alias, eaque iusto! Voluptatem eveniet modi dignissimos praesentium adipisci quibusdam laudantium ex ut fugiat.</p>
</div>
<!-- div that expands to end of viewport (right side) -->
<div class='contentwrapper'>
<section id='freelancewrapper'>
<h1>Why hire a freelance designer?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, hic inventore sunt harum nesciunt voluptatem deserunt assumenda tenetur. Explicabo, eligendi ipsum laboriosam porro nisi quos, qui, adipisci id veritatis necessitatibus ducimus dignissimos maiores nobis voluptates perspiciatis vero? Laborum fugiat itaque placeat, voluptatibus. Repellendus fuga, vel alias eos molestias.</p>
</section>
</div>
<!-- more content below -->
<div class="content">
<h3>Content below expanded div</h3>
<p>Temporibus possimus illo quis provident, illum perferendis maxime fugit tempora rem incidunt earum amet vitae atque est alias dolores totam architecto voluptatem voluptate, officiis deleniti enim accusantium laborum error. Fugiat.</p>
</div>
</div>
这篇关于定义响应div的宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
