HTML/CSS 페이지 상단에 헤더와 끈을 붙이십시오.

현재 웹 프로젝트에서 작업 중이므로 언제든지 사용할 수있는 내 웹 사이트 에 스티커 부분을 설정하고 싶습니다. 나는 다른 일을 시도했지만 아무 일도 없었다.HTML/CSS 페이지 상단에 헤더와 끈을 붙이십시오.

내 구조는 당신이 방식을 선호하는 경우,이 링크의

<body> 
    <wrap> 
    <header></header> 
    <nav></nav> 
    <container></container> 
    </wrap> 
    <footer></footer> 
</body>

이하 같다 : http://s21.postimg.org/79tp8wu5z/structure_page.png

그래서 내가 (몸의 배경에 적용되는) 내 헤더 탐색 및 배경을 만들고 싶어 페이지의 위에 끈끈한.

고정 된 상대 위치를 사용해야하지만 배경을 제외하고는 아무 것도 작동하지 않는다는 것을 알고 있습니다. 당신의 도움에 대한

body { 
    background: url(img/bg.jpg) no-repeat center center; 
    background-attachment: fixed; 
    background-position: top; 
} 

.wrap { 
    width: 960px; 
    margin: 0 auto; 
} 

#header { 
    height: 121px; 
    position: relative; 
} 

#footer { 
    height: 40px; 
    background-color: #146992; 
    position: relative; 
} 

.container { 
    position:relative; 
} 

#menu { 
    position:relative; 
    height: 45px; 
}

감사 :

여기 내 CSS입니다.

출처

2013-06-07 Loric-

예 다스에 유래 여기에이 주제에 대해이 있습니다! – JeanValjean

* ...하지만 아무 것도 작동하지 않습니다. 그것은 정확히 어떻게 작동하지 않습니까? 데모 페이지를 공유 할 수 있습니까? – fcalderan

http://stackoverflow.com/questions/8326665/fixed-page-header의 중복 –

nav 막대의 위치가 고정되어 있지 않습니다.

#nav 
{ 
background-color:#262626; 
width:100%; 
height:50px; 
box-shadow: 0px 1px 50px #5E5E5E; 
position:fixed; 
top:0px; 
}

를 사용하여 시도하거나 당신은 시작에 Twitter Bootstrap를 사용할 수 있습니다.

보기 here 및 here.

출처

2013-06-07 09:17:44

반응 형 웹 사이트를 만들면 고정 위치를 사용하지 마십시오. 웹킷 브라우저 및 iPhone & iPad에 문제가 있기 때문입니다. 개인적으로 나는 Page Scroller을 사용하는 것이 좋습니다. 이것은 클라이언트를위한 쉽고 부드러운 스크롤을 도와줍니다.

출처

2013-06-07 10:03:44

저는이 문제를 직접 조사했습니다. 나는 꽤 많은 해결책을 보았고 그들 각각은 종종 어떤 마법의 숫자와 관련된 쟁점을 가지고있었습니다.

그래서 다양한 소스에서 최상의 방법을 사용하여 나는 해결책을했다 :

내가 여기에 구체적으로 달성하기 위해 싶었던 것은 주요 내용은 녹지 내부 바닥 글 및 헤더를 스크롤에 도착했다. 여기

소스 코드와 데모를하고있다 :

html, body { 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
header { 
 
    height: 4em; 
 
    background-color:red; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.content { 
 
    background:white; 
 
    position:absolute; 
 
    top:5em; 
 
    bottom:5em; 
 
    overflow:auto; 
 
} 
 
.contentinner { 
 

 
} 
 
.container { 
 
    height: 100%; 
 
    margin: -4em 0 -2em 0; 
 
    background:green; 
 
    position:relative; 
 
    overflow:auto; 
 
} 
 
footer { 
 
    height: 2em; 
 
    position:relative; 
 
    z-index:1; 
 
    background-color:yellow; 
 
}

<header>Header Strip</header> 
 
<div class="container"> 
 
    <div class="content"> 
 
    <div class="contentinner"> 
 
      <p>THIS IS WHERE THE CONTENT GOES</p> 
 
      <p><a href="http://traceyspencer.blogspot.co.uk/2012/04/css-sticky-header-and-footer-with.html" target="_blank">CLICK HERE for an explanation of this page</a>.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus nibh, bibendum sit amet porttitor ut, pretium id lectus. Nulla facilisis erat vel nisi malesuada consequat. Phasellus ac porta enim. Aliquam feugiat, lacus ornare fringilla sodales, neque arcu ultricies lorem, vel rhoncus lacus purus eu est. Proin sodales suscipit elit, ut consectetur erat faucibus a. Integer gravida, odio sed pellentesque cursus, lorem mi gravida nisi, vel consequat leo turpis vel leo. Vestibulum ac purus quam. Donec imperdiet varius mollis. Aliquam adipiscing magna vitae ipsum aliquam blandit. Morbi lectus purus, tempor vitae laoreet eu, sollicitudin sit amet magna.</p> 
 
      <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p> 
 
      <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p> 
 
      <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
      <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p> 
 
      <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p> 
 
      <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p> 
 
      <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
      <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p></div> 
 
    </div> 
 
</div> 
 
<footer>This is the footer</footer>

출처

2013-09-26 17:06:25 husayt

HTML/CSS 페이지 상단에 헤더와 끈을 붙이십시오.

답변

관련 문제