2016-10-30 6 views
1

私は非常にhtmlの経験がありません。私はPythonを知っていますが、これまでにdjangoを使ったことはありませんでした。私はユーザーが画面の左側にいくつかのコードを表示し、画面の右側にいくつかのテキストを入力することができますシンプルなウェブサイトを設定しようとしている。 Webページがスクロールするようにコードがかなり長くなることもありますが、スクロールアップまたはスクロールしても常にテキストボックスが表示されるようにします。私のコードが今では、テキストボックスは画面の右側にありますが、常に下部にとどまります。ここではそれがどのように見えるかのスクリーンショットです:html div要素を縦スクロール(html/django)するにはどうすればよいですか?

example

ここで私は.htmlのファイルがあります(ポストに表示するためにスクリーンショットを取得するように見えることはできませんが、ここにリンクhttp://imgur.com/3JfgHH3です)ジャンゴで私のtemplatesディレクトリに使用します。HTMLの知識の私の完全な欠如のため

<div style="display: inline-block"> 
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %} 

<pre>{{ source_code }}<pre> 
</div> 

<div style ="display: inline-block" > 
<form method="post" action="/labeling/{{ document_id }}/send/"> 
{% csrf_token %} 
<input type="text" name="textfield"> 
<input type="submit" value="Finish" name="finish_btn" /> 

</form> 
</div> 

申し訳ありません。私はこれを直接djangoやhtmlファイルで修正することで、画面の右下に永続的に貼り付けるのではなく、テキストボックスとボタンがスクロールしながら上下に動くようにします。必要な場合は、ジャンゴコードも投稿できますが、これがhtmlで直接可能かどうかはわかりませんでした。

+0

を。 – furas

答えて

2

<div style ="display: inline-block;position: fixed;" >

最初のdivのあなたのスタイリングにposition: fixed;を実装します。それはすでにそのトリックを行うはずです。 @furasのように、スタイリングにはCSSを学ぶ必要があります。 CSSファイルで

+0

これは完全に機能しました。私はこれを試したことを誓うことができたかもしれませんが、おそらくスタイル変数に2つの引数を付けることによって混乱しているかもしれません。私はそれを前に試したときに何もしなかったようでした、ありがとう! – qazplok11

0

次のコードを追加してください:あなたはそれを行うにはCSSを学ぶ必要があり

div.[class_name_of_div_element] { 
position: fixed; 
} 
関連する問題