Question

无论页面上有多少内容并且内容与页脚不重叠，是否有一种方法可以将页脚放在底部？

感谢您的帮助

Answer 1

更好的想法是使用像twitter-bootstrap这样的css框架。但是如果你想用css实现这一点，你的css文件中的这样的东西会给你你需要的东西：

footer {
    width: 100%;
    bottom: 0;
    position: fixed;     
}

为了确保任何内容和页脚不会重叠，您可以在您的身体中设置padding-bottom：

body {
    padding-bottom: 60px;
}

或者设置一个内容div，您可以将其设置为＆＃39; margin-bottom＆＃39;：

.content {
    margin-bottom: 60px;
}

jsfiddle

Answer 2

Flexbox可能是一个非常灵活的解决方案。除非内容太多，否则页脚将始终位于页面底部，然后它将位于页面的末尾（因此没有＆＃34;重叠＆＃34;）。

＆＃13;

Intent i = new Intent(
                        Intent.ACTION_PICK,
                        android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

                startActivityForResult(i, RESULT_LOAD_IMAGE);
            }
        });
        saveDialog.show();
    }
}


        @Override
        protected void onActivityResult ( int requestCode, int resultCode, Intent data){
            super.onActivityResult(requestCode, resultCode, data);

            if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && null != data) {
                Uri selectedImage = data.getData();
                String[] filePathColumn = {MediaStore.Images.Media.DATA};

                 cursor = getContentResolver().query(selectedImage,
                        filePathColumn, null, null, null);
                cursor.moveToFirst();


                columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                temp = cursor.getString(columnIndex);
                cursor.close();



                 a= BitmapFactory.decodeFile(temp);
                Drawable d = new BitmapDrawable(getResources(), a);

                drawView.setBackgroundColor(Color.WHITE);
                drawView.startNew();

                drawView.setBackground(d);

＆＃13;

document.getElementById("expand").addEventListener("click", function() { document.getElementById("long").style.display = "block"; });

＆＃13;

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  height: 100vh;
}
header, footer {
  flex-basis: auto;
  flex-grow: 0;
  padding: 20px;
  background: #ccc;
}
div#content {
  flex-grow: 1;
  padding: 20px;
}
div#long {
  display: none;
}

＆＃13;

需要帮助来制作响应式页脚？

2 个答案: