样式css宽度:继承？

Question

我有一些从父母那里得到的元素div.为什么？

这就是我所拥有的

CSS:

.lightbox img {
    margin-top: 2%;
}

.viewer-v3.lightbox {
    overflow: auto;
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
}

.viewer img {
    margin-top: 2%;
    max-width: 100%;
    margin-bottom: 2%;
}


.borderLightbox
{
    border:#cccccc;
    border-width:1%;
    border-top-style:none;
    border-right-style:solid; 
    border-bottom-style :solid;
    border-left-style:solid;
    position:relative;

    width: 80%;
    background-color:#e5e5e5;
    margin-left:auto;
    margin-right:auto;
}




.headerLightbox
{
    position:fixed;
    background-color:#e5e5e5;
    border:#cccccc;
    border-width:1%;
    width: inherit;
    float:left;
    border-top-style:solid;

    border-right-style:none; 
    border-bottom-style :none;

    border-left-style:none;
}

.actionsLightbox
{
    background-color:#ffffff;
}

和HTML:

<div class="viewer-v3 lightbox">
    <div class="borderLightbox">

        <div class="headerLightbox">
            HEADER

            <div class="actionsLightbox">
               ACTIONS
            </div>

        </div>

        <img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
    </div>
</div>

问题是标题和操作总是脱离父级div.我不知道为什么,因为所有的widhts都是从父母那里继承的div,而我的标题和行动div总是从父母那里得到的？

Answer 1

UPDATE 3

The solution is to add a content box around the content and let him have the scrollbar.

See this example.

HTML

<div class="viewer-v3 lightbox">
   <div class="borderLightbox">
       <div class="headerLightbox">
           HEADER
           <div class="actionsLightbox">
               ACTIONS
           </div>
       </div>
       <div class="contentbox">
           <img class="image" src="http://www.goldbergjones-or.com/blog/wp-content/uploads/2013/05/how-to-get-divorced.jpg">
       </div>
   </div>
</div>

CSS

.lightbox img {
  margin-top: 2%;
}

.viewer-v3.lightbox {
    overflow: auto;
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
}

.viewer img {
    margin-top: 2%;
    max-width: 100%;
    margin-bottom: 2%;
}
.contentbox {
    height: 100%;
    overflow: auto;
}


.borderLightbox
{
    border:#cccccc;

    border-width:1%;
    border-top-style:none;

    border-right-style:solid; 
    border-bottom-style :solid;

    border-left-style:solid;
    position:relative;
    width: 80%;
    height: 100%;
    background-color:#e5e5e5;
    margin-left:auto;
    margin-right:auto;
    overflow: visible;
}

.headerLightbox
{
    position:fixed;
    background-color:#e5e5e5;
    border:#cccccc;
    border-width:1%;
    width: inherit;
    float:left;
    border-top-style:solid;

    border-right-style:none; 
    border-bottom-style :none;

    border-left-style:none;
}

.actionsLightbox
{
    background-color:#ffffff;
}

UPDATE 2

Understood your requirements, and I am afraid it is not possible.

The reason for the behavior is that .viewer gets a scrollbar, therefore its content width won't equal to the width of the body.

Thus: 80% of viewer != 80% of body (which is what you have for the position: fixed .header)

To see what I mean, just remove the height: 100% from the .viewer, and everything pops into place (only that .viewer won't be scrollable which is a no go)

UPDATE 1

If you need it fixed: do pixel sizes help?

.borderLightbox {
   width: 500px;
}

http://jsbin.com/AkAhawa/5

ORIGINAL

It is because you have the position: fixed; property.

Think about it as that takes it out of the context of its parent and makes the body its parent, so from then on, positioning and sizing the .headerLightbox will be relative to the viewport.

如果您希望简单地显示标题width: 100%（关于其父级），则使用

.headerLightbox
{
    width: 100%;
}