CSS 빈 열은 여전히 ​​나타나지만 여전히 나타납니다

Question

내 템플릿 내에 시스템을 만들려고합니다. 여기서 "사이드 바"에 내용을 넣으면 사이드 바가 표시되고 기본 창 내용이 적절하게 이동됩니다. 사이드 바에 콘텐츠가 없으면 보여지지 않습니다.

<div id="newcontainer"> 
    <div id="content">    
     <div id="sidebar-left"> 
     {% block left_sidebar %} 
     {% endblock%} 
     </div> 
     <div id="sidebar-right"> 
     {% block right_sidebar %} 
     {% endblock%}    
     </div> 
     <div id="col-main"> 
     {% block content %} 
     {% endblock%} 
     </div> 
    </div> 
</div> 

이 내가 다른 사용자의 도움을 가지고 얼마나 멀리이다 : 그러나 JSFIDDLE LINK

, 당신은 내가 왼쪽 열에서 어떤 내용을 넣어하지 않은,하지만 여전히 패딩이 나타납니다 볼 수 있습니다! 이것은 내가 원하지 않는 것입니다. 사이드 바에 완전히 사라지기를 원하는 콘텐츠가 없을 때입니다. 이 옵션에는 어떤 것이 있습니까? 사이드 바가 없을 때 가운데 상자에 패딩이 남을 것이기 때문에 가운데 상자에 패딩을 넣고 싶지 않습니다.

Answer 1

당신은 상당히 현대적인 브라우저를 주어, 그 빈 요소를 대상으로 :empty 의사 선택을 사용할 수 있습니다

#sidebar-left:empty, 
#sidebar-right:empty { 
    padding: 0; 
    border-width: 0; 
} 

JS Fiddle demo.

CSS로 타겟팅 할 수 있도록 요소 (이 경우 오른쪽 열의 문자 인 p)가있는 텍스트를 줄 바꿈하는 경우 margin 대신 padding :

#sidebar-left p, 
#sidebar-right p { 
    margin: 0 10px; 
} 

JS Fiddle demo.

: 당신은 자식 요소에 스타일을 더 많이 이동하는 경우 (이 부모 요소가 가득 지정된 높이로 보이는하지 않는 결과를 가지고 있지만)

또한, 당신은뿐만 아니라 눈에 보이는 테두리를 해결할 수

#sidebar-left p, 
#sidebar-right p { 
    padding: 0 10px; 
    background-color: grey; 
    border: 0 solid #000; 
} 

#sidebar-right p { 
    border-left-width: 1px; 
} 

#sidebar-left p { 
    border-right-width: 1px; 
} 

JS Fiddle demo.

Answer 2

귀하의 문제는 높이를 설정 한 것입니다. 당신이 max-height: 50px;에 height: 80px;을 변경하는 경우는

문제가 해결됩니다 아니면 그냥