2016-09-13 78 views
1

我有一個由3列體組成的頁面。第一列和第三列內有按鈕。我試圖正確定位它們。列內絕對位置

特別是,我有一個問題,必須顯示在頁面底部(靠近頁腳)的第一列的按鈕。

但我用的樣式沒有效果。我想這是因爲列是空的,並且定位是相對於其高度而言的。我試圖使用height:100%;屬性,但它不起作用。

我該如何解決它?

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet"          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
html { 
     position: relative; 
     min-height: 100%; 
     } 
body { 
     margin-bottom: 20vh; 
     background-color:#f2f2f2; 
     } 
     footer { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      height: 10vh; 
     } 

     footer { 
      background-color: black; 
      color:white; 
      } </style> 
     <style> 
       #upButton {position:absolute; left:0px; bottom:0px;} 
     </style> 

     <style> 
       .col1 {height:100%;} 
     </style> 
</head> 
<body> 
      <div id="header" class="header" align="center"> 
          <h1 align="center">Some header 
          <small>some subheader</smalll> 
       </div>       
      <div class="container"> 
         <div class="row"> 
           <div class="col-md-2 col1"> 
                <a id="upButton" 
             href="#header" class="btn btn-success" 
             role="button">Up 
                </a> 
           </div> 
           <div class="col-md-8">...</div> 
           <div class="col-md-2"> 
            <a href="#f" align="right" class="btn 
           btn-danger" role="button">Down 
            </a> 
           </div> 
         </div> 
      </div> 
    <footer> 
     <div class="container-fluid"> 
      <p><a id="f">All right unreserved</a></p> 
     </div> 
     </footer> 
</body> 

所以現在我的解決辦法只能如果我把大量文字的第一列裏 - 然後向上按鈕靠近頁腳,因爲它應該是。但沒有文字它向上...

編輯:我設法解決它通過把兩個按鈕正確的身體,但如果有一個解決方案,允許他們留在各自的專欄,我想知道。 upbuttondownbutton 在圖片上,向上按鈕靠近頁腳,而向下按鈕靠近頁眉。

編輯:有建議的解決方案代碼:

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet"          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
html { 
     position: relative; 
     min-height: 100%; 
     } 
body { 
     margin-bottom: 20vh; 
     background-color:#f2f2f2; 
     } 
     footer { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      height: 10vh; 
     } 

     footer { 
      background-color: black; 
      color:white; 
      } </style> 


     <style> 
        #upButton {position:fixed; left:0px; bottom:100px;} 
        .col1 {height:100%;} 
     </style> 


</head> 
<body> 
      <div id="header" class="header" align="center"> 
          <h1 align="center">Some header 
          <small>some subheader</smalll> 
       </div>       
      <div class="container"> 
         <div class="row"> 
           <div class="col-md-2 col1"> 
                <a id="upButton" 
             href="#header" class="btn btn-success" 
             role="button">Up 
                </a> 
           </div> 
           <div class="col-md-8">.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but with today's satellites and space observation does not hold well at all, although it was probably ingenious for the time. Also getting there, getting in and discovering no new technology (based on electricity) works on the mountain is also very interesting, especially connected to Gurdjieff's notion that electricity was discovered before and is not an inexhaustible resource. Of course, Father Sogol is no one but Alexandre de (von) Saltzmann, one of the foremost Gurdjieff's students, of whom not as much is known, compared to the other students like Alexandre's wife Jeanne, and the de (von) Hartmann's. He must have been a formidable personality to have left such an impression on Daumal. This book is a gem, even in its unfinished form, or maybe because of it.This book must have been revolutionary when it came out in the 1930s. The language, the style, the unbashed uncaring for literary norms must have been like a fresh air of rebellion to the stifled people of the 1930s who just few decades ago were under the moral oppression of the Victorian age. The book begins with an ode to Tanya's cunt. And it continues in the same manner. The word cunt is probably the most used word in the entire book. Today it would be called vulgar, but at the time it was revolutionary and brave. Miller describes multiple women he's had sex with while living in Paris, mostly on the money of other people, or as a vagrant and homeless on the streets. Most of the women he sleeps with are prostitutes (and he goes at length discussing the different types of prostitutes), but there is also the Jewish adulteress, the Russian princess with gonorrhea, the strange french woman to whom he gives 100 francs and then takes them out of her purse after having sex with her in her house above the room of her sick mother. Chapters of lucid description of characters (mostly Miller's friends whose money he uses, at whose houses he sleeps and whose women he has sex with) and some semblance of story lines are alternated with chapters of stream-of-consciousness monologues with prophetic statements and deep insights into life and living that usually come only after a very heavy intoxication with various substances. The book finishes in a middle of an action, just like it starts. Nothing really happens throughout and there's no sustained plot or even any novel-long characters (except the author-narrator) but it does give an entertaining and fascinating view into the life of the American emigres to Paris between the two wars in a much different way than Hemingway. POSTED BY MR.B. AT 2:12 PM NO COMMENTS: THURSDAY, JULY 7, 2016 "Mount Analogue" by Rene Daumal It ends in mid-sentence in the fifth chapter. Rene Daumal died days later of tubercolosis. He was in his 36th year of his life. Peradams. Only Father Sogol (Logos, took me a while to figure it out without anyone pointing it out to me) found one and very low, below the mountain where no Peradams are usually found, but he had an epiphany about himself. The book has an extensive intro section where the future planned chapters by Daumal are explained and it is a real shame that they were not written. Or maybe the book is more effective this way? After all Gurdjieff's "Life is real only when I AM" also stops in a middle of a sentence, and some who have seen the original manuscripts say that the published version is a much smaller selection from what was available. "Mount Analogue" is a very readable and well written book, to be expected from a writer of Daumal's caliber, and although Gurdjieff's name is never explicitly mentioned - it is based on the ideas and understanding of Gurdjieff's system (not to be called "The Fourth Way", but simply the "Gurdjieff System") and contains the personal thoughts and development of a person working on themselves according to the system. The explanation on how Mount Analogue would have been physically hidden from anyone for so long is definitely done by the latest science available at that period (1930s), but ..</div> 
           <div class="col-md-2"> 
            <a href="#f" align="right" class="btn 
           btn-danger" role="button">Down 
            </a> 
           </div> 
         </div> 
      </div> 
    <footer> 
     <div class="container-fluid"> 
      <p><a id="f">All right unreserved</a></p> 
     </div> 
     </footer> 
</body> 
</html> 
+1

你能提供一個你想要的樣子嗎?一個圖像將不勝感激。 – netto

+0

查看我的回答...我認爲您正在製作導航按鈕以進入您的頁面,我的解決方案堆疊在您的視口的底部,因此如果您需要一些保證金,請添加margin-bottom:{height頁腳} px; ... – netto

回答

1

嘗試自己的風格改變了這一點。輸出可能是你尋找的結果。

<style> 
    #upButton {position:fixed; left:0px; bottom:0px;} 
    .col1 {height:100%;} 
</style> 

我換了個姿勢,從絕對固定,嘗試讀取位置不同的價值觀...... CSS Layout - The position Property

+0

謝謝,這幾乎和預期的一樣。但是,是否可以讓「向上」按鈕保持在底部,這樣當我看不到頁腳時,我看不到按鈕? – parsecer

+0

hm ...可以傳遞你的頁面的整個代碼?所以我可以嘗試修復它? – netto

+0

當然。編輯帖子,查看最後一個代碼塊。嘗試使用此網站http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default,它會正確顯示代碼。 – parsecer

1

使得upButton固定的,我們可以不考慮控制它的它的父所以這樣我們就可以實現您的要求

<head> 
    <style> 
      #upButton {position:fixed; left:5px; bottom:5px;} 
      .col1 { height:100%; } 
    </style> 
    </head> 
    <body> 

     <div class="container-fluid"> 
        <div class="row" style="height: 100%"> 
          <div class="col-xs-2 col1"> 
           <a id="upButton" href="#header" class="btn btn-success" role="button">Up 
           </a> 
          </div> 
          <div class="col-xs-8">.......</div> 
          <div class="col-xs-2"> 
           <a href="#f" align="right" class="btn btn-danger" role="button">Down 
           </a> 
          </div> 
        </div> 
      </div> 

</body> 

現場演示:https://jsbin.com/kuberop/2/edit?html,output

2

一種方法,我建議是,你使用flex

首先確保bodycontainerrowcol1所有佔用全高甚至是空的時,(檢查確認)。

如果是,則將col1設置爲display:flex。你可以很容易地使用flex兒童的特性來使它保持下來。

#upButton { 
align-self: flex-end 
} 
+0

我會用這個,flex box是一個不錯的選擇,支持非常廣泛:http://caniuse.com/#feat=flexbox – kaosmos