하위 div 폭이 상위 div의 너비를 초과합니다.

하위 요소의 너비가 상위 div의 너비를 초과합니다. 나는 고정해야하는 위치를 설정했기 때문에 이것이 발생 했음에 틀림 없다고 생각되지만, 그것을 대체 해야할지는 모른다. 이 div는 창의 상단에 고정되어야하는 탐색 모음입니다. 위치 제거 : 고정, 크기가 부모 div에 잘 맞습니다. 그러나 탐색 표시 줄은 더 이상 고정되어 있지 않습니다. 이 문제를 어떻게 해결합니까?하위 div 폭이 상위 div의 너비를 초과합니다.

참조 : page

CSS :

.fixed_pos { 
    position: fixed; 
}

보기 :

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span11 fixed_pos"> 
     <ul class="nav nav-tabs"> 
     </ul> 
     </div> 
    </div> 
</div>

많이 감사합니다 사전에!

출처

2012-12-28 Maximus S

CSS는 그래서 우리는 문제가있을 수 있습니다 무엇을 볼 수 있습니다 . –

고정 된 탐색의 경우 일반적으로 가장 바깥 쪽 레이어 또는 자체 절대 div에 필요합니다. 그것은 상당히 솔직합니다. 보고 조정할 수있는 바이올린이 있습니다. 아직도 모든 div를 사용하여 실제로 무엇을 만들지는 모르겠지만 쉽게 조정할 수있는 기본 설정입니다.

http://jsfiddle.net/hakarune/FMmEc/

html로 :

<div id="wrap"> 
<nav> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Our Products</a></li> 
<li><a href="#">FAQs</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Login</a></li> 
</nav> 

    <div id="header"> 
     <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1> 
    </div> 

    <div id="content"> 
     <p> Basic Fixed Nav at Top</p> 

    </div> 
</div>

이

당신이 div의에 대한 모든 CSS 속성을 추가해야

nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 15px 0; 
    padding: 0px; 
    list-style: none; 
    background-color: #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position:fixed; 
    top:0px; 
} 
nav li {float: left; } 
nav li a { 
    display: block; 
     padding: 8px 15px; 
     text-decoration: none; 
     font-weight: bold; 
     color: #069; 
     border-right: 1px solid #ccc; } 
nav li a:hover { 
     color: #c00; 
     background-color: #fff; } 
    /* End navigation bar styling. */ 

    /* This is just styling for this specific page. */ 
body { 
     background-color: #555; 
     font: small/1.3 Arial, Helvetica, sans-serif; } 
#wrap { 
     width: 750px; 
     margin: 0 auto; 
     background-color: #fff; } 
h1 { 
     font-size: 1.5em; 
     padding: 1em 8px; 
     color: #333; 
     background-color: #069; 
     margin: 30px auto 0; 
} 
#content { 
     padding: 0 50px 50px; }

출처

2012-12-28 07:33:30 hakarune

이것은 올바른 답과 가장 가깝습니다. http://stackoverflow.com/questions/9350818/fixed-sidebar-navigation-in-fluid-twitter-bootstrap-2-0 –

참조 페이지를 확인한 결과 적어도 내 목표는 완벽하게 작동하는 것처럼 보입니다. . 브라우저 크기를 800보다 작게 조정할 때를 제외하면 ... 작은 창 크기에서 탐색 표시 줄이 사라지는 것을 수정 했습니까? (또한 버튼이 사라집니다 ...) – hakarune

동적 인 유체 스타일을 반영하기 위해 바이올린을 편집했습니다. 'min-width : 300px;를 추가하면 탐색 막대에 필요한 길이보다 작은 크기로 조정되지 않습니다. 도움을 주신 덕분에 – hakarune

고정 위치 요소는 포함 된 요소 (details)가 아닌 뷰포트를 기준으로 배치됩니다. 다음은 작동 할 수 있습니다 : 나는 그렇게 당신이 몸에 설정 무엇에 적응 inherit에 패딩의로 body의 직접적인 자식 인 자신의 고정 된 용기에 탐색 요소를 이동

<body> 

    <!-- the stuff you have up here... --> 

    <div class="container-fluid" 
     style=" 
      position: fixed; 
      left: 0; 
      right: 0; 
      padding-right: inherit; 
      padding-left: inherit;"> 

     <div class="row-fluid" id="menus-desktop"><!-- MENUS DESKTOP --> 

      <!-- set to span12 and removed fixed_pos class --> 
      <div class="span12" style="position: relative;"> 
       <!-- ul, etc... --> 
      </div> 
     </div> 
    </div> 

    <!-- the previous container but without the nav stuff --> 

</body>

. 그런 다음 이전에 고정 된 <span> 요소를 더 이상 고정하지 말고 span12으로 설정하여 정확한 너비가되도록합니다.

출처

2012-12-28 06:52:33 tiffon

내 탐색 너비를 행 너비에 완벽하게 맞추려고합니다. 나는 위치 설정을 생각합니다 : 어떤 유동성 요소에 고정 시키면 내용물이 내부에 들어갈 수 있도록 폭이 줄어 듭니다. –

하위 div 폭이 상위 div의 너비를 초과합니다.

답변

관련 문제