Q&A
ナビの高さは、どのように指定していますか？
すみません。先ほど質問をした者です。
プログラム上の質問というわけではないのですが、コーディング上の一般常識を伺いたいです。
今グロナビを作っていて、position:stickyを使用しようとしています。
（position:fixedだと、レスポンシブ対応スマホ表示の際に高さが失われてメインコンテンツと重なってしまうため。単純にメインコンテンツをmargin-top:～pxとしても、ウィンドウサイズを変えると高さが変わってしまう）
しかし、親にoverflow:hiddenが使われていて、効かない状態です。
この場合、position:fixedに切り替えて、スマホの表示の際はjsでメインコンテンツのmargin:topを操作するという選択はありでしょうか？
jsはオフにしている人もいるので、なるべくなら避けたいところです。
高さは特にcssでは指定しておらず、内部の要素の高さとなっています。
「内部の要素」に合わせれば良いのでは？
該当箇所のコードを提示されると回答がつきやすくなるかと思います。
回答1件
0
ベストアンサー
コーディング上の一般常識を伺いたいです。
ふむふむ
親にoverflow:hiddenが使われていて、効かない状態です。
ここ非常識
CSSはそもそも表現力が足りない以上、
親子の関係を使ってデザイン整合性を整える事も視野に入れるべきで、
親のプロパティにXXが指定されているので子が影響出るというのは中々の失態だと思う。
（position:fixedだと、レスポンシブ対応スマホ表示の際に高さが失われてメインコンテンツと重なってしまうため。単純にメインコンテンツをmargin-top:～pxとしても、ウィンドウサイズを変えると高さが変わってしまう）
position: xxx;に固執する必要はなくって、
body直下にheader, footer, article(or main)の3要素だけ露出するようにして、
articleにoverflow: scroll;を掛けつつ3要素合わせて画面一杯にする作りも十分可能。
bodyにはflex-boxのカラムモードで指定すればheaderやfooterは固定幅でも十分使い物になるしね。
footerはスクロールした末尾なら、body直下はheaderとmainだけにして、
mainの中身はarticle, footerという順にしつつmainに対してoverflow: scroll;を採用する案もある
jsはオフにしている人もいるので、なるべくなら避けたいところです。
具体的に誰がJSをオフにしてるの？
というわけで、実践的には考える必要はないかな。
今の御時世JavaScriptを一切使わないページはありえない程ありふれていて、
20世紀の大昔と違ってOSを巻き込んだ大クラッシュやローカルファイルを盗まれたみたいなヤバい事故も殆どない。
CSSと違ってJSでDOMをカシャカシャ組み替えるのは遅いから、出来るだけ使わないという思想はあるにはあるけど、
JSをオフにしている人が居るので採用しませんってのは「具体的に誰よ？」が必要な説明になってくる。
i-modeとかを指すならそもそも外部CSSにも対応してないし、対応文字コードがShift-JISのみという仰け反るような仕様だから、もう一個フロントエンドを作り直すくらいのレベルの話になってくるからね。
position: sticky;を使いたい
Firefox作ってる団体が管理している情報サイトMDNのpositionみたいな所を見ると、
サポートしているブラウザ一覧が載ってる。
例えばIE11は2025年までサポート対象となっているけど、sticky使えないね。
なのでJSのon/offよりよほどこっちの方がクリティカルといえる。
まぁ、IE11は最低限閲覧出来ればOKくらいに考えて、サポートブラウザから切るのも手だけど
上司や経営層に説明出来るようにGAとか入れてIEユーザの割合が少ないので切っても問題ないみたいな分析は行っておいた方がいい。
投稿2019/02/05 10:43
総合スコア21158
あなたの回答
tips
プレビュー
