위치 고정 너비 100 %

위치 고정 너비 100 %

---

나는이 position:fixed넓은 100 % 높이 250 픽셀에서 왼쪽 열을 나는 상단에 있지만,이 예와 같이 왼쪽 열, 오른쪽에 고정, 유체 수평 막대를 배치하기 위해 노력하고있어 :

그러나 이것이 내가 여기서 얻는 것입니다.

이것이 내가 한 일입니다.

JSFIDDLE

.page-wrapper, html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.left-column {
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:250px;
    height:100%;
    background:#090909;
}

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
}

이 고정 된 상단 막대를 화면 폭의 100 %로 확장하지 않고 어떻게 만들 수 있습니까? 꽤 복잡한 반응 형 템플릿을 만드는 데 오랜 세월을 보냈고 콘텐츠를 추가 한 후 상단 표시 줄의 오른쪽에있는 항목이 화면에서 사라지고 있다는 것을 방금 알게 되었기 때문에 이것이 간단한 수정이되기를 바랍니다.

I do have one idea but may not be the most ideal, so interested in others suggestions first. The left fixed column could be given a higher z-index value than the top bar, remove the left-margin from the top bar, but instead put a left-margin on the top bar contents, the same as the width of the left column. Sounds confusing but possible.

---

Very simple solution that won't require the latest CSS version is not setting width at all. Instead just set right: 0, which will force the right border of the top bar to sit at the right border as can be seen in this fiddle.

.top-bar {
    position:fixed;
    top:0;
    left:250px;
    right:0;
    height:54px;
    background:#090909;
    z-index:1000;
}

I've added a red border so it's easier to see where the box ends.

---

Instead of using left: 250px use padding-left:250px in conjuction with box-sizing: border-box:

.top-bar {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:54px;
    background:#090909;
    z-index:1000;
    padding-left: 250px;
    -moz-box-sizing: border-box:
    box-sizing: border-box:
}

FIDDLE

---

Try this

.left-column {
    float:left;
    width:150px;
    height:100px;
    background:#090909;
    color:white;
}

.top-bar {
    margin-left:150px;
    background:yellow;
    border:2px solid red;
}

http://jsfiddle.net/jGP5Y/87/

참고 URL : https://stackoverflow.com/questions/18442628/position-fixed-width-100