위치 : 절대 및 부모 높이?

나는 몇 개의 컨테이너를 가지고 있으며 그들의 아이들은 절대적 / 상대적으로 위치합니다. 아이들이 컨테이너 안에 들어갈 수 있도록 컨테이너 높이를 설정하는 방법은 무엇입니까?

코드는 다음과 같습니다.

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

여기 jsfiddle이 있습니다. "막대"텍스트가 4 개의 사각형 뒤에 표시되지 않고 표시되기를 원합니다.

http://jsfiddle.net/Ht9Qy/

쉬운 수정이 있습니까?

이 아이들의 키를 모르고 컨테이너의 높이를 xxx로 설정할 수 없습니다.

당신이 올바르게하려는 일을 이해한다면, 아이들을 절대적으로 위치를 유지하면서 CSS로 이것이 가능하다고 생각하지 않습니다.

절대적으로 배치 된 요소는 문서 흐름에서 완전히 제거되므로 해당 치수는 상위의 치수를 변경할 수 없습니다.

당신이 경우 정말 달성했다으로 아이들을 유지하면서이 영향을 position: absolute당신은 그들이 렌더링 한 후 절대 위치 아이들의 높이를 찾는하여 자바 스크립트로 그렇게 할 수있는, 부모의 높이를 설정하는 것을 사용.

또는 float: left/ float:right및 여백을 사용 하여 자식을 문서 흐름에 유지하면서 동일한 위치 지정 효과를 얻은 다음 overflow: hidden부모 (또는 다른 clearfix 기술)에서 사용하여 높이를 자식 높이로 확장 할 수 있습니다.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

다음은 내 해결 방법입니다
. 귀하의 예제에서는 .one & .two 요소의 "동일한 스타일" 을 사용하지만 절대 위치가없고 가시성이 숨겨진 세 번째 요소를 추가 할 수 있습니다 .

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}

이것은 늦은 답변이지만 소스 코드를 살펴보면 비디오가 전체 화면 일 때 "mejs-container-fullscreen"클래스가 "mejs-container"요소에 추가된다는 것을 알았습니다. 따라서이 클래스를 기반으로 스타일링을 변경할 수 있습니다.

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

또한 CSS를 사용하여 MediaElement 비디오를 유동적으로 만들고 싶다면 Chris Coyier의 훌륭한 트릭입니다. http://css-tricks.com/rundown-of-handling-flexible-media/

CSS에 다음을 추가하십시오.

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

도움이되기를 바랍니다.

이러한 종류의 레이아웃 문제는 이제 flexbox로 해결할 수 있으므로 높이를 알거나 절대 위치 또는 부동으로 레이아웃을 제어 할 필요가 없습니다. OP의 주요 질문은 부모가 키를 알 수없는 자식을 포함하도록하는 방법이었으며 특정 레이아웃 내에서 수행하기를 원했습니다. 부모 컨테이너의 높이를 "fit-content"로 설정하면 이렇게됩니다. "display : flex"와 "justify-content : space-between"을 사용하면 OP가 만들려고했던 섹션 / 열 레이아웃이 생성됩니다.

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

OP의 바이올린을 수정했습니다. http://jsfiddle.net/taL4s9fj/

flexbox의 css-tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

그리드로 할 수 있습니다.

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

이것은 또 다른 늦은 대답이지만 네 개의 사각형 사이에 "막대"텍스트를 배치하는 매우 간단한 방법을 알아 냈습니다. 내가 변경 한 내용은 다음과 같습니다. 막대 섹션에서 나는 센터와 div 태그 안에 "bar"텍스트를 감쌌다.

<header><center><div class="bar">bar</div></center></header>

그리고 CSS 섹션에서 위의 div 태그에 사용되는 "bar"클래스를 만들었습니다. 이것을 추가 한 후 막대 텍스트는 4 개의 컬러 블록 사이에 중앙에 위치했습니다.

.bar{
    position: relative;
}