- 0
- 국내산라이츄
- 조회 수 297
아 이번껀 회사 홈페이지가 아니라서 소스 공개 가능합니다. ㅇㅅㅇ
(푸터에 전번이 있지만 그건 소스 올릴 게 아니라 상관 없긔)
1. HTML 구조
<body>
<nav(메뉴)>
<wrapper(div)>
<fieldset 1></fieldset 1>
<fieldset 2></fieldset 2>
... (필드셋 다섯개)
</wrapper>
<Footer(div)>
</body>
2. full 소스(...)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>읽기</title>
</head>
<body>
<jsp:include page="link.jsp" />
<div id="wrapper">
<div id="diary" class="diary">
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:diary";
String id = "";
String pass = "";
int idx = Integer.parseInt(request.getParameter("idx"));
int pg = Integer.parseInt(request.getParameter("pg"));
try {
Connection conn = DriverManager.getConnection(url,id,pass);
Statement stmt = conn.createStatement();
String sql = "SELECT TITLE, TIME, CONTENTS FROM diary WHERE NUM=" + idx;
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
String title = rs.getString(1);
String time = rs.getString(2);
String cont = rs.getString(3);
%>
<fieldset class="post">
<table>
<tr class="title">
<td width="12.5%" align="center"><img src="resources/048-chat-1.png"></td><td align="left"><%=title %></td>
</tr>
</table>
</fieldset>
<fieldset class="post2">
<table class="table2">
<tr class="cont">
<td width="12.5%" align="center" style="vertical-align:top;"><img src="resources/048-chat-1.png"></td><td align="left"><%=cont%></td>
</tr>
</table>
</fieldset>
<fieldset class="img">
<img src="resources/shinyalolan-sleep.jpg"><br>
<br>
<%=time %>에 작성된 <%=idx %>번째 다이어리<br>
<div class="button">
<a href="modify.jsp?idx=<%=idx%>&pg=<%=pg%>"><img class="edit" src="resources/edit.png"></a>
<a href="delete.jsp?idx=<%=idx%>&pg=<%=pg%>"><img class="delete" src="resources/file.png"></a>
<a href="list.jsp?pg=<%=pg%>"><img class="goback" src="resources/go-back-arrow (1).png"></a>
</div>
</fieldset>
<% rs.close();
stmt.close();
conn.close();
}
}catch(SQLException e) { } %>
</div>
<div id="vclock">
<fieldset>
<jsp:include page="Clock.jsp" />
</fieldset>
</div>
</div>
<jsp:include page="Footer.jsp" />
</body>
</html>
3. 해당 CSS
body {font-family:"1훈시나몬베이글"; font-size:15pt; margin-top:4.5%; background:#fff4fd; padding:10px; overflow-x:hidden;overflow-y:scroll; background-image:url('http://koreanraichu.esy.es/wp-content/uploads/2016/12/nihilego_minimalist_wallpaper_by_morshute-dap5pdm.jpg'); background-size:contain;}
html, body {height:100%;}
#wrapper {min-height:100%; position:relative;}
::selection {background-color:navy; color:beige;}
a {text-decoration:none;}
fieldset {border-color:transparent; margin:5px; padding:15px; color:navy; text-align:center; border-radius:15px; background-color:white; opacity:0.7;}
legend {color:blue;}
img {width:27px; vertical-align:middle;}
textarea {font-family:"1훈시나몬베이글"; margin:10px; padding:5px; width:90%; height:100%; box-sizing:border-box; color:navy; border:0px;}
button {outline:0px; border:0px; background:transparent; margin:20px 10px 10px 10px;}
#footer {position:absolute;bototm:0;width:100%;height:1em;color:navy;text-align:center;font-size:20pt;padding-bottom:1em;}
#footer a {text-decoration:none; color:steelblue;text-shadow: 3px 3px 2px grey;}
(Footer는 모든 영역에 적용됩니다)
4. 그리고 지금 상황
-내용이 짧을 때
푸터 : 난 그냥 밑에 있을란다 (푸터 가출)
(overflow는 y만 scroll 상태이고 x는 히든입니다. 저렇게 켜두니까 스크롤바가 생기네요;;)
-내용이 길 때
이 때는 제 위치에 있습니다. (스크롤바도)
5. 그래서 문제가 뭔가요
wrapper 내에 본문이 있는데 본문 길이가 100%를 넘어가지 않는 짧은 글을 view로 불러올 때도 footer가 화면을 넘어가버립니다.
그래서 bottom을 0으로 하면 긴 글을 읽을 때(아래 사진처럼 100%를 넘어가는 경우가 긴 글) 푸터가 글 중간에 고정돼버립니다.
그리고 wrapper의 높이는 아무리 해도 줄어들지를 않고요...
스크롤바도 글의 길이가 height보다 길 때 나와야 하는데 본문이 있는 필드셋의 높이가 창보다 작은데도 불구하고 스크롤바가 생깁니다...
CSS는 if함수가 안되는건가요? 차라리 그게 되면 넘어갈 때 푸터 여기다 두고 안 넘어갈때는 여기다 두고 이렇게 하고 싶습니다...
오토요? 그거 씨알도 안 먹혀요...
