2015-09-13 11 views
1

我想做一個頁面的索引(iframe),但我不能在文本前完成。無論我嘗試什麼,文本都會出現在iframe或iframe不在右側的位置。iframe正確的文本

page.html中

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>page</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head> 

<body> 


    <iframe src="index.html" height="520" style="right: 10px; position:fixed"> 
    </iframe> 


some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text -- some text 

</body> 
</html> 

的index.html

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>index</title> 
    <style type="text/css"> 
     <!-- 
      BODY { 
      COLOR: #0080FF; 
      BACKGROUND: black; 
     --> 
    </style> 
</head> 
<body> 

some text </br> 

some text </br> 

some text </br> 

</body> 
</html> 

我想有在IFRAME並不落後和iframe的一側上的文字文本的右側浮動滾動所以當它始終可見。 ifame不應該像頁面上的其他文字一樣向上或向下。或者有沒有更好的方法來做到這一點,而不是iframe?

回答

1

你可以用一些簡單的浮點數來實現這一點。我會移動你的CSS樣式to an external file。這是一個準系統的例子,你可以隨心所欲地填寫剩下的內容。

// style.css 
 

 
.container { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.some-text { 
 
    float: left; 
 
    width: 250px; // change to whatever you like 
 
} 
 
iframe { 
 
    position: fixed; 
 
    float: right; 
 
    height: 120px; 
 
    width: 250px; // change to whatever you'd like 
 
}

 

 
<!-- page.html --> 
 

 
<div class="container"> 
 
    <div class="some-text"> 
 

 
    <h1>Some Heading</h1> 
 
    <p>Some text, some text, some text</p> 
 

 
    </div> 
 

 
    <iframe src="index.html" frameborder="0" /> 
 

 
</div>

+0

我怎樣才能讓index.html中的鏈接跳轉到page.html中的一部分,而無需加載整個頁面。 – andrej

+0

你想加載鏈接在iframe @andrej? –

+0

不,在page.html中。我想我找到了它。我將在index.html中添加'target =「_ parent」'。 – andrej

2

向下滾動,你會看到的iframe停留在哪裏。這裏是一個fiddle

.wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.maintext { 
 
    float: right; 
 
    width: calc(100% - 320px); 
 
} 
 
iframe { 
 
    position: fixed; 
 
    float: left; 
 
    top:10px; 
 
    height: 300px; 
 
    width: 300px; 
 
}
<div class="wrapper"> 
 
    <div class="maintext"> 
 

 
    <h1>Heading</h1> 
 
    <p><strong>Scroll and you will see that the iframe stays put.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt libero nec justo tempus, facilisis dictum leo pellentesque. Proin nulla est, dignissim ac nibh at, cursus imperdiet nisl. Sed cursus libero at varius viverra. Proin rutrum placerat dapibus. Mauris sed justo vestibulum, ultricies risus nec, ullamcorper erat. Pellentesque in gravida magna, nec feugiat dui. Proin urna nunc, mattis eu pellentesque ultricies, accumsan vel dui. 
 

 
Donec faucibus sit amet neque vitae semper. Vivamus rhoncus egestas convallis. Morbi rutrum tellus et diam pharetra, nec vehicula lectus facilisis. Etiam blandit augue quis volutpat luctus. Etiam rhoncus sodales suscipit. Quisque pellentesque vitae arcu at ullamcorper. Vivamus lectus dui, varius vel enim ac, gravida molestie augue. Mauris sed tortor nisi. 
 

 
Quisque id orci facilisis, faucibus metus et, ullamcorper tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus semper lacus egestas mauris sodales, et efficitur velit iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus eleifend odio eget eleifend lobortis. Morbi et ante scelerisque erat sagittis dictum. Maecenas nec arcu id enim euismod sagittis. Sed consectetur porttitor sodales. Integer ac pretium risus. Cras vel tortor eros. Nunc ut orci ultricies, euismod ante sit amet, volutpat mauris. Fusce ultrices turpis ut luctus vulputate. Cras vitae hendrerit quam. Maecenas in augue varius, scelerisque sapien ut, suscipit neque.</p> 
 

 
    </div> 
 

 
    <iframe src="http://www.musicmatters.ie" frameborder="1" /> 
 

 
</div>

+0

我認爲在這個答案中,左和右是錯誤的。他們應該被切換。 – andrej